Css Grids
A flexible grid system to build page layouts. This a mobile-first, twelve column system using css grid. Classes append a prefix `cg-` to avoid collision with flex grid.
Rows
Represent a wrapper for columns. Rows are styled using the class cg-row.
Row 1 col
Row 1 col
Row 2 col
Row 2 col
Row 2 col
<div class="cg-row">
<div class="cg-col-6">Row 1 col</div>
<div class="cg-col-6">Row 1 col</div>
</div>
<div class="cg-row">
<div class="cg-col-4">Row 2 col</div>
<div class="cg-col-6">Row 2 col</div>
<div class="cg-col-2">Row 2 col</div>
</div>
Columns
Content is meant to be placed inside columns. Columns take different width based
on the number of specified columns. The columns are styled using the classes
cg-col.
Col 2
Col 2
Col 2
Col 6
Col small 12, otherwise col 4
Col small 12, otherwise col 4
Col small 12, otherwise col 4
<div class="cg-row">
<div class="cg-col-2">Col 2</div>
<div class="cg-col-2">Col 2</div>
<div class="cg-col-2">Col 2</div>
<div class="cg-col-6">Col 6</div>
</div>
<div class="cg-row">
<div class="cg-col-sm-12 cg-col-md-4">Col small 12, otherwise col 4</div>
<div class="cg-col-sm-12 cg-col-md-4">Col small 12, otherwise col 4</div>
<div class="cg-col-sm-12 cg-col-md-4">Col small 12, otherwise col 4</div>
</div>
Row gutters
Column provides gutters (horizontal padding) to space between each other. This
can be removed using the class cg-row--no-gutters to the parent row element.
Col with gutters
Col with gutters
Col with gutters
Col without gutters
Col without gutters
Col without gutters
<div class="cg-row">
<div class="cg-col-3">Col with gutters</div>
<div class="cg-col-6">Col with gutters</div>
<div class="cg-col-3">Col with gutters</div>
</div>
<div class="cg-row cg-row--no-gutters">
<div class="cg-col-3">Col without gutters</div>
<div class="cg-col-6">Col without gutters</div>
<div class="cg-col-3">Col without gutters</div>
</div>
Row margin
A row can also provide outer margin using the class cg-row--margin. This margin
varies depending on the current viewport breakpoint.
Row 1 col without margin
Row 1 col wihtout margin
Row 2 col with gutters
Row 2 col with gutters
<div class="cg-row">
<div class="cg-col-4">Row 1 col without margin</div>
<div class="cg-col-8">Row 1 col wihtout margin</div>
</div>
<div class="cg-row cg-row--margin">
<div class="cg-col-4">Row 2 col with gutters</div>
<div class="cg-col-8">Row 2 col with gutters</div>
</div>
Full
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
1 of 2
2 of 2 (nested)
1 of 2
2 of 2
<div class="container">
<div class="cg-row">
<div class="cg-col-3">
1 of 3
</div>
<div class="cg-col-6">
2 of 3 (wider)
</div>
<div class="cg-col-3">
3 of 3
</div>
</div>
<div class="cg-row">
<div class="cg-col-6">
1 of 3
</div>
<div class="cg-col-5">
2 of 3 (wider)
</div>
<div class="cg-col-1">
3 of 3
</div>
</div>
<div class="cg-row">
<div class="cg-col-2">
1 of 2
</div>
<div class="cg-col-10">
2 of 2 (nested)
<div class="cg-row">
<div class="cg-col-6">
1 of 2
</div>
<div class="cg-col-6">
2 of 2
</div>
</div>
</div>
</div>
</div>
Download
Get a bundle with all css grid styles.
Download<p>Get a bundle with all css grid styles.</p>
<a href="/styles/atoms/cssGrid.css" download="cs-css-grid.css" target="_blank" class="btn btn--primary">Download</a>