There is a couple of ways to implement CSS grid. Although float grid is not the most recommended method I still wanted to do that for academic purpose.
In this example, I am going to implement a CSS grid like the image below. There will be 6 rows total and each row will have its own columns.

HTML Code
Here is the HTML code showing how each row/columns are respresented. There will be 6 css classes to represent each column.
1. col-1-of-2: column size 1 out of 2 (50%)
2. col-1-of-3: column size 1 out of 3 (33%)
3. col-1-of-4: column size 1 out of 4 (25%)
4. col-2-of-3: column size 2 out of 3 (66%)
5. col-2-of-4: column size 2 out of 4 (50%)
6. col-3-of-4: column size 3 out of 4 (75%)
<section class="grid-test"> <div class="row"> <div class="col-1-of-2"> Col 1 of 2 </div> <div class="col-1-of-2"> Col 1 of 2 </div> </div> <div class="row"> <div class="col-1-of-3"> Col 1 of 3 </div> <div class="col-1-of-3"> Col 1 of 3 </div> <div class="col-1-of-3"> Col 1 of 3 </div> </div> <div class="row"> <div class="col-1-of-3"> Col 1 of 3 </div> <div class="col-2-of-3"> Col 2 of 3 </div> </div> <div class="row"> <div class="col-1-of-4"> Col 1 of 4 </div> <div class="col-1-of-4"> Col 1 of 4 </div> <div class="col-1-of-4"> Col 1 of 4 </div> <div class="col-1-of-4"> Col 1 of 4 </div> </div> <div class="row"> <div class="col-1-of-4"> Col 1 of 4 </div> <div class="col-1-of-4"> Col 1 of 4 </div> <div class="col-2-of-4"> Col 2 of 4 </div> </div> <div class="row"> <div class="col-1-of-4"> Col 1 of 4 </div> <div class="col-3-of-4"> Col 3 of 4 </div> </div> </section>
CSS (SASS) Code
There is a couple of things to note.
- :not(:last-child) means select everything except the last child because we don’t want the last child to have margin bottom.
- attribute selector [] in line 27. Note that there is a common code for all the column classes and we don’t want to repeat that. attribute selector is used in order to solve duplicate code. [class^=”col-“] means to select all the elements with the class attributes starts with ‘col-‘ string. It also implies that you can use any attributes to select elements.
- calc is a provided function that can calculate an equation. It is able to accept % in the equation.
$grid-width: 114rem; $gutter-vertical: 8rem; $gutter-horizontal: 6rem; @mixin clearfix { &::after { content: ""; display: table; clear: both; } } .row { max-width: $grid-width; background-color: #eee; margin: 0 auto; &:not(:last-child) { margin-bottom: $gutter-vertical; } @include clearfix; // select all the elements with the class attributes starts with 'col-' // ^ start with // * contain // $ end with [class^="col-"] { color: white; height: 5rem; font-size: 3rem; background-color: orangered; float: left; &:not(:last-child) { margin-right: $gutter-horizontal; } } .col-1-of-2 { width: calc((100% - #{$gutter-horizontal}) / 2); } .col-1-of-3 { width: calc((100% - 2 * #{$gutter-horizontal}) / 3); } .col-1-of-4 { width: calc((100% - 3 * #{$gutter-horizontal}) / 4); } .col-2-of-3 { width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal}); } .col-2-of-4 { width: calc(2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal}); } .col-3-of-4 { width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal}); } }
How each equation is decided
- col-1-of-2
Check the first row. You only have 2 columns and 1 gutter. The width of pure columns is (100% – gutter). Then since there are two columns in the row you need to divide it by 2. The width of a single column is then (100% – gutter) / 2 - col-1-of-3
Check the second row. You have 3 columns and 2 gutters. The width of pure columns is (100% – 2 * gutter). Then since there are three columns in the row you need to divide it by 3. The width of a single column is then (100% – 2 * gutter) / 3 - col-2-of-3
This one seems to be a bit tricky but it’s actually pretty simple. If you look at row 2, 2-of-3 is actually the sum of two col-1-of-3 and one gutter.
The width of a single column is then (2 * 2-of-3 + gutter) - col-3-of-4
This is the exact same case as the above. This is the sum of three col-1-of-4 and two gutters.
The width of a single column is then (3 * 1-of-4 + 2 * gutter)