Improved cross browser responsive css grid layout

After creating an awesome percentage based layout, I implemented it on several sites and found it to speed up development and be the most important tool I use. However there where some issues with my previous implementation.


- table cells had to flow together in a row, floats can flow one at a time
- nesting rows and cells produced some unexpected behaviour in safari

I've updated the grid to improve on these and make it even more efficient! The row class has now been simplified and works across browsers Chrome, Safari, Firefox and IE8+. Cells need box sixing to ensure the percentages + the padding of the cell make 100% of the width

Here are the updated row classes:

.row {
    max-width: 980px;
    margin: 0 auto 10px auto;
    overflow: auto;
}

.row .row {
    margin: 0 -10px;
}

 Cell has been renamed to col to better describe it.

.col {
    float: left;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

You can add a class to make your row go full width:

.full {
    max-width: 100%;
}

.full .col {
    max-width: 980px;
    margin: 0 auto;
    float: none;
}

Some helper classes to create the column widths:

.w1of1 { width: 100%; }
.w1of2 { width: 50%; }
.w1of3 { width: 33.33333%; }
.w2of3 { width: 66.66666%; }
.w1of4 { width: 25%; }
.w3of4 { width: 75%; }
.w1of5 { width: 20%; }
.w2of5 { width: 40%; }
.w3of5 { width: 60%; }
.w4of5 { width: 80%; }

You may also want to set some responsive rules to break the cells down at certain widths. Here are some examples of object orientated css breakpoints

/* 20em = 320px */

@media (max-width: 20em) {
    .flow-xs.col,
    .flow-xs .col {
        width: 100%;
    }
}

/* 30em = 480px */

@media (max-width: 30em) {
    .flow-s.col,
    .flow-s .col {
        width: 100%;
    }
}

/* 48em = 768px */

@media (max-width: 48em) {
    .flow-m.col,
    .flow-m .col {
        width: 100%;
    }
}

/* 64em = 1024px */

@media (max-width: 64em) {
    .flow-l.col,
    .flow-l .col {
        width: 100%;
    }
}

/* 80em = 1280px */

@media (max-width: 80em) {
    .flow-xl.col,
    .flow-xl .col {
        width: 100%;
    }
}

Themes are namespaced and keep your styling separate, i've set up two examples called light and dark. Colours are name using c1, c2, c3. Bg colours as bg1, bg2, bg3

.dark {
    color: #bbbbbb;
}

.dark .c1 {
    color: #ffffff;
}

.dark .c2 {
    color: #bbbbbb;
}

.dark a.c2:hover {
    color: #ffffff;
}

.dark.bg1,
.dark .bg1 {
    background-color: #333333;
}

.dark.bg2,
.dark .bg2 {
    background-color: #111111;
}

The final grid is only 74 lines of css and 1KB in size. Compared to twitter bootstrap which is 10KB and 550 lines full of dirty selectors!

Here is my layout.css with comments and helpers removed:

.row {
    max-width: 980px;
    margin: 0 auto 10px auto;
    overflow: auto;
}

.row .row {
    margin: 0 -10px;
}

.col {
    float: left;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.full {
    max-width: 100%;
}

.full .col {
    max-width: 980px;
    margin: 0 auto;
    float: none;
}

.w1of1 { width: 100%; }
.w1of2 { width: 50%; }
.w1of3 { width: 33.33333%; }
.w2of3 { width: 66.66666%; }
.w1of4 { width: 25%; }
.w3of4 { width: 75%; }
.w1of5 { width: 20%; }
.w2of5 { width: 40%; }
.w3of5 { width: 60%; }
.w4of5 { width: 80%; }

@media (max-width: 20em) {
    .flow-xs.col,
    .flow-xs .col {
        width: 100%;
    }
}

@media (max-width: 30em) {
    .flow-s.col,
    .flow-s .col {
        width: 100%;
    }
}

@media (max-width: 48em) {
    .flow-m.col,
    .flow-m .col {
        width: 100%;
    }
}

@media (max-width: 64em) {
    .flow-l.col,
    .flow-l .col {
        width: 100%;
    }
}

@media (max-width: 80em) {
    .flow-xl.col,
    .flow-xl .col {
        width: 100%;
    }
}

You download the full code at:
https://github.com/kmturley/alley

Working example: