The Problem with CSS Grids

The 960 Grid System: - designed to make page layout easier, but it's not without a few problemsThe 960 Grid System: - designed to make page layout easier, but leads to tighter coupling between content and presentationCSS was designed to improve web page layout by separating presentation from layout. By separating content (HTML) from presentation (CSS) there is looser coupling from a computer science perspective. The whole idea is that you can change the layout of the entire site by changing the CSS without any changes to the content. The problem is to get anywhere beyond the basics of layout and cross-browser compatibility, CSS takes time to learn and can be frustrating.

CSS grids like the 960 Grid System came along offering the advantages of CSS with fewer layout hassles. Using a grid for layout is nothing new--graphic designers have been using the grid concept for print layout for years. (See: http://en.wikipedia.org/wiki/Grid_(page_layout) )

What's the Problem?

OK, CSS is great and grids make it easier... so what's the problem? Let's take a closer look at some sample markup. In this example we will have some body text and a sidebar.

<div class="sidebar">
    <p>Some sample sidebar text... etc.</p> 
</div>
<div class="body-text">
    <p>Some sample body text... etc.</p> 
</div>

The meaning of the code is clear: first a div for the sidebar and then a div for the body text of the page. You can say that the markup doesn't know anything about how it will be displayed. This is the separation of concerns or loose coupling. We can put the sidebar on the left, on the right, make it 240 pixels wide, 300 pixels wide, or any other variation we want. The HTML never has to change.

Let's contrast that with similar code for a grid layout.

<div class="grid_3">
    <p>Some sample sidebar text... etc.</p> 
</div>
<div class="grid_9"> 
    <p>Some sample body text... etc.</p> 
</div> 

Pretty similar, but different in some important ways. First off, the big advantage: we don't have to write any CSS to lay out the body and sidebar. But you'll notice that the markup needs to know about the CSS--tight coupling or no separation of concerns. Furthermore, if you want to change the layout of the page, you have to change the content. You might suggest that the CSS doesn't need to know about the HTML in this case, but only the most trivial example would not have any custom CSS.

Accessibility

Grid systems don't inherently offer advantages or disadvantages regarding accessibility. However, some alternate layouts that put the content first do offer advantages for people using text-to-speech screen readers. In the Drupal world, the Zen base theme (http://drupal.org/project/zen) is notable for putting the content first. If making your site available to the widest number of users is not reason enough to consider accessibility, keep in mind that the spiders that index your site for placement on Google are similar to screen readers. Addressing accessibility an help your search engine placement.

Should You Use a CSS Grid?

Losing the major advantage of CSS seems like a big disadvantage--not being able to change the appearance of your entire site without changing all the content is a big loss. It's not as bad as it seems, however. Consider a Drupal website... you can change the appearance of the entire site without changing all the content. This is because much of the markup is separated from the content by the theme layer.

In conclusion, there are some issues with CSS grid systems. However, the way we might use them with a CMS like Drupal turns it to a grey area. So the answer to the question on whether to use a CSS grid becomes: "it depends".

Thanks to mgifford for input regarding accessibility.