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; }
    .grid-2  { width: 140px; }
    .grid-3  { width: 220px; }
    .grid-4  { width: 300px; }
    .grid-5  { width: 380px; }
    .grid-6  { width: 460px; }
    .grid-7  { width: 540px; }
    .grid-8  { width: 620px; }
    .grid-9  { width: 700px; }
    .grid-10 { width: 780px; }
    .grid-11 { width: 860px; }
    .grid-12 { width: 940px; }
}
//Clear Floated Elements - http://davidwalsh.name/css-clear-fix
.clear, .row {
    &:before,
    &:after { content: ''; display: table; }
    &:after { clear: both; }
}
//Use rows to nest containers
.row { margin-bottom: 10px;
    &:last-of-type { margin-bottom: 0; }
}
//Legacy IE
.clear { zoom: 1; }

Tip

Remember that we turned 960GS into 980GS because the content would look too close to the edge of the main container with only 10px gutters on the left and right of that main container. So, we added 10px more to each side and made the main container 980px wide.

Because we are mastering RWD with HTML5 and CSS3, let's look at that same 980GS with percentages to make it fluid.

The RWD magic formula is (target ÷ context) x 100 = result %.

Our context in this case is 980px, as shown here:

//Container
.container-12 {
    width: 100%;
    max-width: 980px;
    padding: 0 1.02%;
    margin: auto;
}
//Grid >> Global
.grid {
    &-1, &-2, &-3, &-4, &-5, &-6, &-7, &-8, &-9, &-10, &-11, &-12 {
        float: left;
        margin: 0 1.02%;
    }
}
//Grid >> 12 Columns
.container-12 {
    .grid-1  { width: 6.12%; }
    .grid-2  { width: 14.29%; }
    .grid-3  { width: 22.45%; }
    .grid-4  { width: 30.61%; }
    .grid-5  { width: 38.78%; }
    .grid-6  { width: 46.94%; }
    .grid-7  { width: 55.10%; }
    .grid-8  { width: 63.27%; }
    .grid-9  { width: 71.43%; }
    .grid-10 { width: 79.59%; }
    .grid-11 { width: 87.76%; }
    .grid-12 { width: 95.92%; }
}
//Clear Floated Elements - http://davidwalsh.name/css-clear-fix
.clear, .row {
  &:before,
  &:after { content: ''; display: table; }
  &:after { clear: both; }
}
//Use rows to nest containers
.row { margin-bottom: 10px;
  &:last-of-type { margin-bottom: 0; }
}
//Legacy IE
.clear { zoom: 1; }

In web design, grids are usually made with 12 or 16 columns. 960GS is pretty much one of the most famous ones, albeit it's always been a fixed-width grid. But other authors have ported it to make it fluid, such as the Fluid 960 Grid System, but not responsive. The 960GS also has the option of 24 columns, but it's not as popular as the 12 column version.

There are other grids for web design that do not have a defined frame width or number of columns, instead these grids can have an infinite amount of columns, such as the Frameless Grid, which is based on Adaptive Web Design (AWD). This means that the width of the main container snaps to a specific breakpoint calculated by the number of columns that fit in it.

The pros and cons of CSS grids for RWD

The idea behind listing pros and cons of CSS grids for RWD is that we should be able to make the most informed decision when we plan to use a certain type of grid. It helps clarify the clients' expectations and ours, because using a certain grid will impact the timeline, design, layout, and many UX factors.

The advantages are as follows:

Laying out elements is a lot easier because the columns serve as guidelines for placement.
If using a prebuilt CSS grid, there's no need to do any of the math to deal with the column and gutter widths. It's already taken care of by the author of the grid.
We can build faster, since all we need to do is add specific classes to our containers in our HTML and—for the most part—the layout will happen instantly.
Understanding grids in web design is relatively simple, so enhancing/editing someone else's markup and code in an already built project is less painful than if they hadn't used a CSS grid at all.
If the grid is responsive or adaptive, we don't have to worry too much about the breakpoints.
If we are using a third-party CSS grid, any cross-browser issues have already been addressed.

The disadvantages are as follows:

Some CSS grids have a steeper learning curve than others.
With many CSS grids, we are locked into using the name conventions the author created.
We may have to change/adapt the way we write our HTML.
There are so many CSS grids to choose from that it can be overwhelming for some.
If our content breaks at certain points the grid doesn't support, we have to spend time amending the original grid to fit each individual situation.

Previous Chapter

4. CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD

Next Chapter

CSS frameworks

Table of Contents for Mastering Responsive Web Design

CSS grids

Tip

The pros and cons of CSS grids for RWD

Table of Contents for
Mastering Responsive Web Design