A 12x12 customizable grid built with CSS Grid and LESS.
Simply just clone this repo to get started! View docs/index.html for a variety of different possibilities.
- Initialize the grid:
<div class="grid"></div>
- Add your sections:
<div class="grid">
<div id="header"></div>
<div id="article"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
- Position your sections:
<div class="grid">
<div class="col-1-12 row-1-1" id="header"></div>
<div class="col-1-8 row-2-11" id="article"></div>
<div class="col-9-12 row-2-11" id="sidebar"></div>
<div class="col-1-12 row-12-12" id="footer"></div>
</div>
Note: The order of your sections do not matter! This markup will appear exactly the same:
<div class="grid">
<div class="col-1-8 row-2-11" id="article"></div>
<div class="col-1-12 row-12-12" id="footer"></div>
<div class="col-9-12 row-2-11" id="sidebar"></div>
<div class="col-1-12 row-1-1" id="header"></div>
</div>
- Configure your grid settings in
config.less
. As of now the only configuration options are:
- Set column gap size.
- Set row gap size.
- Set grid width.
This is a 12x12 grid meaning there are 12 columns and 12 rows. There are over 150 generated classes. The classes are structured as follows:
(col or row)-(starting block)-(ending block)
Parameters:
[col]-[1-12]-[1-12]
[row]-[1-12]-[1-12]
Examples:
.col-1-12 (This section will start at column 1 and span all 12 columns)
.col-6-12 (This section will start at column 6 and span 6 additional columns)
.row-4-12 (This section will start at row 4 and span 8 additional rows)
.row-12-12 (This section will start at row 12 and only span 1 row)
Note: Sections cannot span backwards. For example, the following is not possible:
.col-12-6
.row-2-1
Note: You do not need to specify both .col and .row classes on a section. If two sequential sections span more than 12 blocks, the second section will automatically break onto the next row/column however specifying both is recommended.
Aligning content is easy. The following classes will align your content vertically and horizontally, as you wish:
- .content-center-v (Vertically center content)
- .content-center-h (Horizontally center content)
- .content-end-v (Vertically align content to bottom)
- .content-end-h (Horizontally align content to right)
Example markup:
<div class="grid">
<div class="col-1-12 row-1-1 content-center-h">This text is horizontally centered.</div>
</div>
Nesting grids is also extremely easy. Just add the .grid
class to your section!
Example markup:
<div class="grid">
<div class="grid col-1-12 row-1-6">
<div class="col-1-12 row-1-1"></div>
<div class="col-1-12 row-2-12"></div>
</div>
</div>
Coming soon...
- .fill-height - Sets the min-height of the grid to 100vh. This is an extremely easy way to get a sticky footer.
Example markup:
<div class="grid fill-height">
<div class="col-1-12 row-1-1" id="header">This header is at the top of the viewport.</div>
<div class="col-1-8 row-2-11" id="article">I span the remaining height of the leftover space.</div>
<div class="col-9-12 row-2-11" id="sidebar">I span the remaining height of the leftover space.</div>
<div class="col-1-12 row-12-12" id="footer">This footer as at the bottom of the viewport.</div>
</div>
- .fixed-width - Sets a fixed width to the grid.
- .center-grid - Centers the grid on the page. This must be used with
.fixed-width
.
Example markup:
<div class="grid fixed-width center-grid">
<div class="col-1-12 row-1-1" id="header">This header is at the top of the viewport.</div>
<div class="col-1-8 row-2-11" id="article">I span the remaining height of the leftover space.</div>
<div class="col-9-12 row-2-11" id="sidebar">I span the remaining height of the leftover space.</div>
<div class="col-1-12 row-12-12" id="footer">This footer as at the bottom of the viewport.</div>
</div>
- Fork it!
- Create your new branch:
git checkout -b my-new-branch
- Commit your changes:
git commit -am 'Add some stuff'
- Push to the branch:
git push origin my-new-branch
- Submit a pull request :D
Grid system built by Joe Berthelot.