Responsive Web Design: Custom Grid Layouts

February 12, 2013

In the last few parts of the responsive design series, I have introduced the characteristics of fluid layouts and I have described how to use fonts responsively. In this article, I want to introduce grid layouts, a widespread and popular design practice. While grid systems have seen significant use in printed media, interest from web and mobile developers has been a very recent development.

A grid is a two-dimensional structure made up of intersecting vertical and horizontal divisions used to structure content. Grids serve as the framework on which a designer can organize text and images into a rational, easy-to-absorb interface. A well-built and properly-implemented grid system increases scalability and improves the readability of the content on a website or within a mobile application.

The advantages of grid layouts are numerous; a grid structure…

gives order, originality, and harmony to the presentation of content;
allows users to predict where to find the information they need;
makes it easier to add new content without having it looking disjointed or marginalized.

To develop a well-built grid layout, the first step is to create the canvas structure itself. It’s the canvas’ size that determines the grid’s frame: it is divided into the number of columns the designer wants (3,5,9,12) and this is the starting point to work on your interface or layout.

The size of a grid does not have to be defined with fixed parameters. A common and proper practice of design for this type of layout is to let the content define the space occupied by the grid, and not vice versa. In this case, “content” does not refer solely to the text; it also refers to everything that has value within an interface, including images, video, text, ads, links, and more. Rather than trying to hammer a variety of content sizes and types into a predetermined grid, you should design your grid around the size and nature of your content. Within your customized grid structure, the layout is divided with vertical and/or horizontal guidelines that provide a consistent organization of space. Once you define the margins and the spacing for columns, your grid will become a clear, logical, and useful organizational schema for your multifaceted mobile content.

Online Tools

Web design frameworks built upon HTML and CSS had become quite popular before newer, more robust frameworks popularized the use of grid-based layouts. The Internet is full of useful models and frameworks with CSS rules that help designers to create a simple, fast, and efficient grid layout for almost any purpose. Some layouts are flexible, others are quite rigid (after all, they are designed to constrain content). Some of them have between three and five columns maximum, while others have between 12 and 16 columns. I bring up the variety of grid frameworks to emphasize that they’re not all the same, and further, there are grids that are inherently better than others. However, to fully understand the benefits of a grid-based approach, you should consider a unique pattern and purpose for each project you have to develop. You should not be afraid to try a variety; remember, simplicity is often the winning design.

On the web, there are many useful grid resources to help you build a properly-proportioned layout or interface for your projects.

Grid System 960: A tool that lets you create websites using a grid of 960 pixels. This number was chosen because it allows easy division into a variety of columns and rows.
Gridr Buildrrr: A tool that offers precise control over borders, margins, and box contents for custom projects.
Design by Grid: A magazine that publishes articles and tutorials on the creation of grid-based designs.

A Grid Layout Markup

If you’d like to try to develop a grid structure with your own hand-written code instead, determine an interface width and the size of the spacing between the various columns. Remember that in order to obtain a balanced effect, it’s important that the various horizontal spacings are of equal size. As discussed before, study your content first, think about how it should be positioned and arranged, and keep these ideas in practice throughout your grid development process.

Add the main elements of your app or mobile website (header, main content, sidebar, and footer) in a wrapper, like this:

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">Content</div>
  <div id="sidebar">Sidebar</div>
  <div id="footer">Footer</div>
</div>

At this point, your content and your sidebar will be divided into sections, all of which will be assigned a class named Grid1, Grid2, Grid3, and so on (it depends on the number of grids that you’ve decided to build). Within each grid cell, there can be as many subsections as you would like to include.

<div class="griglia1">
  <div>Subsection 1</div>
  <div>Subsection 2</div>
  <div>Subsection 3</div>
</div>

As for the CSS, almost everything is based on the proper application of the float CSS property. For the correct positioning of the most prominent area of your grid design (that is, the grid’s main containers, which in turn contain subsections) you employ the so-called “opposite float” technique. For the grids and the horizontal spacings between them, you have to first create several self-contained sections of columns, and secondly, you have to assign each a float and a fixed width. I’ve applied this technique using the following CSS:

div.grid1
{
  float: left;
  width: 290px;
}

Afterward, you’ll apply the same float rule within the sections in multiple columns, giving a specific size to the width and to the right margin (10 pixels in this case) to separate them, like this:

div.grid2 div
{
  float: left;
  width: 250px;
  margin-right: 10px;
}

To add an additional level of modularity, enabling a section to occupy the space of two or more columns, let’s use so-called joint columns: you simply need to assign to an element a class of type ext2, ext3, ext4, or ext5 to have a section that occupies 2, 3, 4, or 5 columns instead of having a unitary width.

Conclusion

This article was intended to point out another possible technique for the design and development of a responsive layout or interface. If there’s one principle to remember about grids, it’s this: Don’t try to cram your content into an ill-fitting grid. If popular solutions don’t suit your needs, design your own grid tailored perfectly for your content. It can be done quickly and easily using a few columns, rows, and CSS declarations.

Want to learn more about Responsive Web Design? Check out SitePoint’s new book, Jump Start Responsive Web Design!