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.

1 response

  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 *


two + = ten

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>