CSS for a Responsive Grid System

note from Mon Sep 14, 2015

In building out this site, I wanted to use a grid system that was flexible, responsive, easy to use and most importantly easy to understand. Here is what I've come up with. It seems to be working fairly well on various browsers and devices. The SCSS as shown below will support a grid system from 2 to 12 columns. The basic idea is that the columns are all relative to the width of the viewport width, until it exceeds 960px, in which we lock it to a 960px grid, or if it goes below a certain threshhold (I used 540px) at which point all columns are forced to 100% so that they stack vertically. This is accomplished with relative widths and CSS media queries. I built in the clearfix into the grid class for convenience. At the end, it turned out to be surprisingly simple... much simpler than I had thought.

It's not perfect, but I imagine that this is a good base for anyone to customize or further develop into a more comprehensive grid system.

.bzztGrid {

  // build in the clearfix
  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
  }

  // common column properties
  .col {
    padding: 0 10px;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    &:last-of-type {
      float: right;
    }

  }

  // one .. twelve column grid column defs
  &.oneCol {
    .col {
      width: 100%;
    }
  }

  &.twoCol {
    .col {
      width: 50%;
      &.span2 {
        width: 100%;
      }
    }
  }

  &.threeCol {
    .col {
      width: 33.3333%;
      &.span2 {
        width: 66.6667%;
      }
      &.span3 {
        width: 100%;
      }
    }
  }

  &.fourCol {
    .col {
      width: 25%;
      &.span2 {
        width: 50%;
      }
      &.span3 {
        width: 75%;
      }
      &.span4 {
        width: 100%;
      }
    }
  }

  &.fiveCol {
    .col {
      width: 20%;
      &.span2 {
        width: 40%;
      }
      &.span3 {
        width: 60%;
      }
      &.span4 {
        width: 80%;
      }
      &.span5 {
        width: 100%;
      }
    }
  }

  &.sixCol {
    .col {
      width: 16.6667%;
      &.span2 {
        width: 33.3333%;
      }
      &.span3 {
        width: 50%;
      }
      &.span4 {
        width: 66.6667%;
      }
      &.span5 {
        width: 83.3333%;
      }
      &.span6 {
        width: 100%;
      }
    }
  }

  &.sevenCol {
    .col {
      width: 14.2857%;
      &.span2 {
        width: 28.5714%;
      }
      &.span3 {
        width: 42.8571%;
      }
      &.span4 {
        width: 57.1429%;
      }
      &.span5 {
        width: 71.4286%;
      }
      &.span6 {
        width: 85.7143%;
      }
      &.span7 {
        width: 100%;
      }
    }
  }

  &.eightCol {
    .col {
      width: 12.5%;
      &.span2 {
        width: 25%;
      }
      &.span3 {
        width: 37.5%;
      }
      &.span4 {
        width: 50%;
      }
      &.span5 {
        width: 62.5%;
      }
      &.span6 {
        width: 75%;
      }
      &.span7 {
        width: 87.5%;
      }
      &.span8 {
        width: 100%;
      }
    }
  }

  &.nineCol {
    .col {
      width: 11.111%;
      &.span2 {
        width: 22.2222%;
      }
      &.span3 {
        width: 33.3333%;
      }
      &.span4 {
        width: 44.4444%;
      }
      &.span5 {
        width: 55.5556%;
      }
      &.span6 {
        width: 66.6667%;
      }
      &.span7 {
        width: 77.7778%;
      }
      &.span8 {
        width: 88.8889%;
      }
      &.span9 {
        width: 100%;
      }
    }
  }

  &.tenCol {
    .col {
      width: 10%;
      &.span2 {
        width: 20%;
      }
      &.span3 {
        width: 30%;
      }
      &.span4 {
        width: 40%;
      }
      &.span5 {
        width: 50%;
      }
      &.span6 {
        width: 60%;
      }
      &.span7 {
        width: 70%;
      }
      &.span8 {
        width: 80%;
      }
      &.span9 {
        width: 90%;
      }
      &.span10 {
        width: 100%;
      }
    }
  }

  &.elevenCol {
    .col {
      width: 9.0909%;
      &.span2 {
        width: 18.1818%;
      }
      &.span3 {
        width: 27.2727%;
      }
      &.span4 {
        width: 36.3636%;
      }
      &.span5 {
        width: 45.4545%;
      }
      &.span6 {
        width: 54.5455%;
      }
      &.span7 {
        width: 63.6364%;
      }
      &.span8 {
        width: 72.7273%;
      }
      &.span9 {
        width: 81.8182%;
      }
      &.span10 {
        width: 90.9091%;
      }
      &.span11 {
        width: 100%;
      }
    }
  }

  &.twelveCol {
    .col {
      width: 8.333%;
      &.span2 {
        width: 18.6667%;
      }
      &.span3 {
        width: 25%;
      }
      &.span4 {
        width: 33.3333%;
      }
      &.span5 {
        width: 41.6667%;
      }
      &.span6 {
        width: 50%;
      }
      &.span7 {
        width: 58.3333%;
      }
      &.span8 {
        width: 66.6667%;
      }
      &.span9 {
        width: 75%;
      }
      &.span10 {
        width: 83.3333%;
      }
      &.span11 {
        width: 91.6667%;
      }
      &.span12 {
        width: 100%;
      }
    }
  }
}

// responsive
@media (min-width: 960px) {
  .bzztGrid {
    width: 960px;
    margin: 0 auto;
  }
}

@media (max-width: 540px) {
  .bzztGrid {
    &.oneCol,
    &.twoCol,
    &.threeCol,
    &.fourCol,
    &.fiveCol,
    &.sixCol,
    &.sevenCol,
    &.eightCol,
    &.nineCol,
    &.tenCol,
    &.elevenCol,
    &.twelveCol {
      .col {
        width: 100%;
        &.span2,
        &.span3,
        &.span4,
        &.span5,
        &.span6,
        &.span7,
        &.span8,
        &.span9,
        &.span10,
        &.span11,
        &.span12 {
          width: 100%;
        }
      }
    }
  }
}

The basic haml would look something like this:

.fourCol.bzztGrid
  .col
    first col
  .col
    second col
  .col
    third col
  .col
    fourth col
    
.eightCol.bzztGrid
  .col.span5
    this spans 5 of the cols for main content
  .col.span3
    this spans 3 for right side bar
tags: #responsive #grid #css #scss #haml

What I'm reading now

A friend recommended "The Little Schemer." The book sets out to teach good recursive thinking through the Scheme programming language. It's slow reading for me, but I am quite enjoying it. I'm learning quite a lot from it. Here's a link to it on Amazon where you can read more about it.

CSS and Responsive

Here are two references for learning about CSS and responsive web design. (As you can see, I'm quite preferential towards the O'Reilly books. I really think most of them are top-quality.)

If you have a Kindle (or a Kindle reader) you can download this for free from Amazon. It's actually a pretty good foundation for anyone who wants to know CSS.