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)