CSS Sleeping Columns in Responsive Layouts

Fluid CSS grids are great because they give us a way to align content into a grid that responds to the width of the browser or device screen. However, as the underlying grid gets narrower we usually want to rearrange the columns so as to retain a comfortable amount of space for the content. Sometimes, of course, this means splitting a column into two new columns as it drops down into a new position.

Fluid CSS grids like this and this don’t seem to cover these kinds of complex break points. If your site has only a few templates then it’s not too hard to give each column a class and then assign them different widths as your media queries fire. But while I was working on some responsive templates for a really big website recently I started wondering about how to code these columns in a more systematic, re-usable way.

@media (min-width: 768px) and (max-width: 959px) {
    /* Tablet layout columns wake up here: */

    .tcl3, .tcl4, .tcl6, .tcl8, .tcl12 {
        float: left;
        margin-left: 2%;
    }

    .tcl3 { width: 22.5%; }
    .tcl4 { width: 30.666666666667%; }
    .tcl6 { width: 47%; }
    .tcl8 { width: 63.333333333333%; }
    .tcl12 { width: 96%; }
    .tcl-last { margin-right: 2%; }
}

@media (min-width: 960px) {
    /* Desktop layout columns wake up here: */

    .dcl3, .dcl4, .dcl6, .dcl8, .dcl9, .dcl12 {
        float: left;
        margin-left: 2.5%;
    }

    .dcl3 { width: 21.875%; }
    .dcl4 { width: 30%; }
    .dcl6 { width: 46.25%; }
    .dcl8 { width: 62.5%; }
    .dcl9 { width: 70.625%; }
    .dcl12 { width: 95%; }
    .dcl-last { margin-right: 2.5%; }

}

So what we have here is a system of classes for both ‘tablet view columns’ (.tcl) and ‘desktop view columns’ (.dcl), both working off the same underlying 12 column grid. Sometimes a tablet column and desktop column can share the same DIV. So for example <div class="tcl4 dcl3"> takes up 4 grid columns on a tablet, but only 3 grid columns on a desktop screen. But in other cases the columns will require separate DIVs, for instance if a single long desktop column needs to split into two separate tablet columns because it is slipping into a wider area.

Granted this is all quite complicated and can make your head hurt at times, especially when trying to put the markup together for a complex page. But the advantage of this approach is that after it is set up, we end up with a system of classes that can be applied to different layout templates fairly quickly, and without having to worry about percentages. Source order is still a limitation of course, and prevents us from using some layout combinations. To get round that you probably have to use Javascript to manipulate the DOM.

One thought on “CSS Sleeping Columns in Responsive Layouts”

  1. I’ve just been reading about the Semantic Grid (http://semantic.gs/) and I think this provides a better, more elegant solution to the problem I was trying to solve. So I would advise people to try that. Probably the only reason for using my sleeping column approach would be if they can’t use a CSS pre-processor in the project for some reason.

Leave a Reply

Your email address will not be published. Required fields are marked *

Help me make sure you\'re not a machine * Time limit is exhausted. Please reload the CAPTCHA.