Grid-Based Web Design

A grid at its barest is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals, but its innate propensity for creating order out of chaos makes it one of the most powerful tools at a designer’s disposal. If you want to reap their benefits of grids on your next project but are unsure of the specifics, this article is for you.

Introduction

Use of the typographic grid in print design quickly achieved ubiquity following its popularization by modernist graphic designers in postwar Switzerland – the same school of thought that created our venerable Helvetica. While grids became entrenched in the culture of print design, factors such as the inconsistent interpretation of CSS across browsers and a lack of formal graphic design training among Web designers stifled the implementation of grids on the screen.
Times are changing, however. The Web standards renaissance has ignited interest in grids among innovators in the community, and a whole slew of CSS-based grid frameworks  have emerged and gained popularity, claiming to greatly reduce development time, all the while providing the same structure and unity that grids have afforded print layouts for so long. Problem solved, right? Not so fast.
While these prefab frameworks perform admirably if used as advertised, the problem is that many designers aren’t taking full advantage of them! From what I can gather based on observation and conversation with colleagues, some among us are deliberately avoiding the use of grids for fear that they will be limited in what they can do with the design. Nothing could be further from the truth!

Visual Grid Designs

Good elearning design is as much about visual communication as it instructional design and learning theory.
When I learned video production years ago, we were always told that everything in the frame means something.  It’s the same with the computer screen.  You’re building the screen and adding content.  Everything you add conveys a message, whether it’s your intention or not.
Look at a company like Apple.  They build good products.  But they also tell a compelling story.  There is a consistent message between the products they sell and the way they pack it visually.  It all adds to the Apple experience.

CSS Grid Layout

The CSS Grid Layout is currently a W3C Working Draft aiming at fixing issues with older layout techniques by providing a better way to achieve complex interface design. Indeed, each solution we (have) use(d) to make web pages has at least a flaw:

• HTML tables: markup dependant, not flexible
• float: clearing
• inline-blocks: spacing between blocks

The CSS Grid Layout consists on defining a 2-dimensional grid in which the children can be positioned as desired. The main benefits of this technique are:

• source order independant (!)
• no need for widths or heights
• no need for floats or inline-blocks
• no need for margins to space columns from each others
• easily adjustable when it comes to responsive

The basic example would be something like this: my .wrapper is my grid; .header will all columns of the first row; .main will by displayed in the second row and the first column; .sidebar in the second row, second column; and .footer in the third row, all columns.

Beginning With 960gs

A 960 Grid System Master—that’s what you’ll be after you’ve gone through this article. And, although we’re going to use the 24-column variant of 960gs, you’ll completely understand how the two older types (i.e., 12- and 16-columns) work too, by applying the same principles you’ll learn here. But first, take a good look at the 24-column demo in the 960gs site, as it’s all we’ll need in our leap towards mastery of this popular CSS framework.