|
|
Oct. 12, 2013

Basics of Responsive Design: Using Fluid Grids

What are fluid grids?

In our last article on the basics of responsive design, we discussed media queries and how they can be used to help create a somewhat responsive web design by defining breakpoints for various screen sizes. But in order for content to truly be responsive, we must also utilize fluid grids.

Grids provide structure to your website, while using relative units can provide fluidity to that structure. Fluid grids are defined using a maximum width for the design; whereas the grid contained therein, is defined using relative widths and/or heights, instead of pixels. This allows the widths and heights to adjust accordingly in relation to the parent container. In other words, as the size of the screen your website is being viewed on gets smaller or larger, your site will adjust accordingly.

We will start with our design mock-up. There is a content div which contains an h1, a main content section with some text, and a sidebar section with an h2 and some text. The html structure looks like this:

<div id="content">
<h1>Flexible Grids are easy! You can do it too!</h1>
<div class="main">
<p>This is some content.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is sidebar content.</p>
</div>
</div>

For our purposes, we want a grid of eight columns set at 100px each, separated by 20px-wide gutters, all of which totals up to a width of 960px. We will also take into account that, currently, most browsers set their default font size at 16px. This brings us to our formula:

target ÷ context = result

By dividing the total grid width of 960px (the target) by the default font-size of 16px (the context), we can set a max-width in ems to approximate the pixel-based width from our mock-up, which will prevent the page from exceeding our ideal of 960px.

960 ÷ 16 = 60

Our CSS would reflect this as:

body {font-size:100%;}
#content{max-width:60em}

Here we use the unit em, this enables the max-width of our content to scale as the font-size scales.

Percentages base size on their parent element, whereas em is based on font-size. If you want to resize your site based on browser/viewport size, use %, if you want your site to resize whenever the user changes the font-size, use em. You can also use a mixture of the two, setting the max-width of the page in em, while using percentages for the rest of the content containers.

Using percentages for inner content containers, we still use the formula: target ÷ context = result. Suppose, for instance, we want a heading to be 700px wide, we would divide our target (700px) by our context (960px). This gives us 700 ÷ 960 = .72916666666667 which would translate to 72.916666666667%. This is now a percentage width we can apply to our heading as such:

h1 {
width: 72.916666666667%
}

We can also set up our main text and sidebar the same way. For the main text we can use the same width as the h1. For our sidebar, we want it to be 200px. So we use our formula again, 200 ÷ 960 = 0.22916666666667 or 22.916666666667%.

.main {
float:left;
width:72.916666666667%;
}
.sidebar {
float:right;
width:22.916666666667%;
}

Putting that all together, along with some margins for gutters, gives us:

body {
font-size: 100%;
}
#content {
margin:25px auto;
max-width: 60em;
}
h1 {
font-size: 4em;
margin:0 0 .5em;
width:72.916666666667%;
}
.main {
float:left;
width:72.916666666667%;
}
.sidebar {
float:right;
width:22.916666666667%;
}
p {margin:.5em 0;}

 

Fluid grids need not be difficult, and by careful planning, basic fluid grids can be fairly straightforward to implement. Fluid grids are, however, just one of the building blocks necessary for responsive design. This article has only touched on some of the very basics of fluid grids. For further reading on fluid grids and responsive design, be sure to read the articles on Responsive Design and Fluid Grids by Ethan Marcotte, who coined the term "Responsive Design". There are also several "Fluid Grid Generators" online, our favorite is http://grids.heroku.com.

 

[image: ThinkStockPhotos]

ABOUT THIS CONTRIBUTOR
Back to top