Mastering Responsive Web Design

CSS grids

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; } ...