demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Grid Layouts

css / layouts

Estimated reading time: 2 minutes, 38 seconds

Traditional Grid LayoutThe grid system is a strong, traditional design tool for presentation of visual information. Based on a table armature of regular divisions, grid systems allow for the consistent, legible, and visually pleasing presentation of graphics and text.

Grid systems are not for everyone, nor are they appropriate to every design. Used well, a grid can supply boldness and readability to a design; used poorly or dogmatically, grids can make a product staid, atomized and confusing.

Traditionally, grids have been used in areas for which media size and scale are fixed: books, magazines, posters and newspapers. CSS has been slowly taking on the complex task of supporting grids for the web through the development of the Grid Positioning and Template Layout Module. As of this writing, only IE10 supports these proposals, which are in “working draft” format and still subject to change.

Designers frustrated with the lack of grid support on the web have typically taken one of three routes as their solution:

  1. Especially in the first decade of the web (but still, sadly, continuing) designers have used <table> markup in an attempt to position text and graphics on a page. As we have discussed, this approach is non-semantic (tables should only ever be used for tabular data) and extremely difficult to modify.

  2. In the latter half of the web’s development, absolutely positioned elements, usually divs, have been used to arrange content across a grid. These also have their drawbacks: they are non-semantic, difficult to adjust, and fixed.

  3. More recently, JavaScript and CSS frameworks such as the 960 Grid System, Blueprint, YUI and YAML have attempted to create simplified CSS systems that rely on an implied grid. While they are all good tools in the hands of professionals, they have drawbacks of their own:

    • Like and other tools, they all tend to separate the user from the code, to the point that design questions become “What button do I push to make things look this way?” rather than asking “What methods can I use to achieve this effect/layout?”

    • Because designers are using the same tool, rather than relying on an understanding of underlying principles, the results tend to come out looking somewhat similar. That’s not to say that they have to – a well-designed grid template has enough possibilities to accept a great many different designs – only that the tendency is there. Resultant designs also tend to be created that exist within the limited solution-space and abilities of the tool, rather than from the full range of design possibilities.

    • Like DreamWeaver, the tools tend to produce non-semantic, difficult-to-understand code.

    • Again like DreamWeaver, reliance on a tool that produces code which is only usable in the presence of that tool is, generally speaking, a bad idea. Take away an understanding of 960 Grid code, for instance, and the markup and CSS no longer make sense.

    For rapid prototyping or the very quick creation of templates, CSS frameworks are a godsend, but I would leave them until you have a strong understanding of CSS itself.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.