A CSS grid is basically a compound of vertical guidelines that form columns. The properties of these columns are defined in a CSS file. This file contains a list of classes with specific widths that match the amount of columns that a specific grid is built for.
We've seen this before in Chapter 3, Mobile-first or Desktop-first? when we used the 980 Grid System (980GS) to retrofit an old, fixed-width site. Here's the SCSS file again:
*, *:before, *:after {
box-sizing: border-box;
}
//Container
.container-12 {
width: 980px;
padding: 0 10px;
margin: auto;
}
//Grid >> Global
.grid {
&-1, &-2, &-3, &-4, &-5, &-6, &-7, &-8, &-9, &-10, &-11, &-12 {
float: left;
margin: 0 10px;
}
}
//Grid >> 12 Columns
.container-12 {
.grid-1 { width: 60px; }
.grid-2 { width: 140px; }
.grid-3 { width: 220px; }
.grid-4 { width: 300px; }
.grid-5 { width: 380px; }
.grid-6 { width...