Creating a responsive web layout using a grid

In the 90s we designed websites with tables.  It was chunky but as web layout tools go it worked.  It helped in making sure that all the elements of the website were organized.  Today tables are still in use but not as a layout tool for websites.  Tables are usually used for organizing tabular data instead … which is what it was created for in the first place.

The trend now, in web design, is to create web layouts with the use of a GRID.

Grid layout


Different layouts as illustrated by

A grid supports arranging views into rows and columns. Rows and columns can be set to have proportional sizes or absolute sizes. The Grid layout should not be confused with traditional tables and is not intended to present tabular data. Grid does not have the concept of row, column or cell formatting. Unlike HTML tables, Grid is purely intended for laying out content. (original source:

pie-slicesThink of a web page as a pie and each slice of a pie is a specific content of your website.  It could be an image, a video, or text content.  It could be a map or even an ad.  Whatever it is, at the end of the day, we assign a size to this element and we also assign a place for it on our page.

How do we create a grid?

There are two ways to create a grid … in fixed measurements like pixels (px) and in variable measurements like percent (%).  Let’s take a look at this table below.

Span Width (Pixels) Width (Percent) Gutter (Pixels) Gutter (Percent) Offset Margin-left
1 60 6.25% 10 1.0416666667% 1 8.3333333%
2 140 14.5833333333% 10 1.0416666667% 2 16.6666667%
3 220 22.9166666667% 10 1.0416666667% 3 25%
4 300 31.25%  10 1.0416666667% 4 33.3333333%
5 380 39.5833333333% 10 1.0416666667% 5 41.6666667%
6 460 47.9166666667% 10 1.0416666667% 6 50%
7 540 56.25% 10 1.0416666667% 7 58.3333333%
8 620 64.5833333333% 10 1.0416666667% 8 66.6666667%
9 700 72.9166666667% 10 1.0416666667% 9 75%
10 780 81.25% 10 1.0416666667% 10 83.3333333%
11 860 89.5833333333% 10 1.0416666667% 11 91.6666667%
12 940 97.9166666667% 10 1.0416666667% 12 100%

The left part illustrates the widths, the middle part the gutter, and the part on the right the offset or indent.

Don’t let the math scare you!  After all, we’ve already done all the computation for you. 🙂  But if you are curious about how we came up with those numbers, here is how each one was computer.

What is the basis for the maximum width?  Shouldn’t it just be 100%?

It starts of with the premise that we are designing for a standard resolution of 1024×768 and that we will not be utilizing the entire screen.  Therefore, 100% of the container will be 960.

Why 960?

It is the biggest number closest to 1024 that is divisible by 12.

Why is the gutter 10px (or 1.0416666667% in percent)?

In my opinion the reason is that 10px has been an industry standard for minimum measurement since the beginning, whether it is font size or margins or padding.  Another reason though had to do with equal distribution of elements. 🙂

Why are there 2 kinds of measurements – in pixels and percent?

Widths defined in pixels (px) are what we call fixed widths.  This means that no matter what size screen (or device) is used the size will remain constant.  Therefore, there may be times when an element would be too big or too small for the screen.

Widths defined in percent (%) are called variable widths.  This means that the width of the element will adjust to the size of the screen or device when viewed.

How wide can an element be?

Visualize your webpage in your head.  Now let’s focus on just one straight horizontal line.  Now divide that line into 12 parts but put some space in between each part.  Do you see it yet?

12 columns

12 columns in a row

In the picture above take note of the blue border.  That is what we refer to as the GUTTER.  It is the designated space separating each element of your website that you will use.  In the table above the gutter is equivalent to 10px (1.0416666667%).

Let’s do some math

How did we come up with those numbers?  Here’s how it was computed

the grid layout

the grid layout

span1 (960/12)=80-20 (this is the gutter on the left and right side)=60; therefore, (60/960)x100=6.25%
span2 span1x2=160-20=140; therefore, (140/960)x100=14.5833333333%
span3 span1x3=240-20=220; therefore, (220/960)x100=22.9166666667%
span4 span1x4=320-20=300; therefore, (300/960)x100=31.25%
span5 span1x5=400-20=380; therefore, (380/960)x100=39.5833333333%
span6 span1x6=480-20=460; therefore, (460/960)x100=47.9166666667%
span7 span1x7=560-20=540; therefore, (540/960)x100=56.25%
span8 span1x8=640-20=620; therefore, (620/960)x100=64.5833333333%
span9 span1x9=720-20=700; therefore, (700/960)x100=72.9166666667%
span10 span1x10=800-20=780; therefore, (780/960)x100=81.25%
span11 span1x11=880-20=860; therefore, (860/960)x100=89.5833333333%
span12 960-20=940; therefore, (940/960)x100=97.9166666667%

The same principle applies to the gutter … (10/960)x100=1.0416666667%

Oh, headache!  So much math!

mathKeep calm.  We already did the math for you, all you need to do is apply the widths to your elements as classes. 🙂  But you may be asking … why “span”.  Truth to tell you could call it anything you like. Some call it “col” or “grid”.  I call it span because that’s what it does … it SPANS columns. 🙂

Since these measurements are most likely to be used over and over, we will use them as classes in our CSS and will be written down like this:

.span1 {
  	margin:  1.0416666667%;
  	width: 6.25%;
.span2 {
  	margin:  1.0416666667%;
  	width: 14.5833333333%;
.span3 {
  	margin:  1.0416666667%;
  	width: 22.9166666667%;
.span4 {
  	margin:  1.0416666667%;
  	width: 31.25%;
.span5 {
  	margin:  1.0416666667%;
  	width: 39.5833333333%;
.span6 {
  	margin:  1.0416666667%;
  	width: 47.9166666667%;
.span7 {
  	margin:  1.0416666667%;
  	width: 56.25%;
.span8 {
  	margin:  1.0416666667%;
  	width: 64.5833333333%;
.span9 {
  	margin:  1.0416666667%;
  	width: 72.9166666667%;
.span10 {
  	margin:  1.0416666667%;
  	width: 81.25%;
.span11 {
  	margin:  1.0416666667%;
  	width: 89.5833333333%;
.span12 {
  	margin:  1.0416666667%;
  	width: 97.9166666667%;

How do we use it?

Just keep in mind one thing … the total width of 1 line (in parts.  Therefore you can keep adding div classes of different sizes (widths) until you reach 12 without going over. If you do, the last element will go to the next line.  For example:


Given the sample above your html will look something like this:

  <!--  I am adding a stylesheet here just to define 
the class "left" which I will use in the code below. -->
  .left { float: left;} 
<div class="span1  left">SPAN1></div>
<div class="span2  left">SPAN2></div>
<div class="span3  left">SPAN3></div>
<div class="span4  left">SPAN4></div>
<div class="span5  left">SPAN5></div>
<div class="span6  left">SPAN6></div>

Since 1, 2, 3, and 4 are short of making up 12, they were able to stand side by side.  But with the addition of 5 it already exceeded 12, therefore, the div went to the next line.

Offset layout

pushMany get confused by this.  What is offset in web design?  Simply put, let’s call it an INDENT.  According to the Oxford Dictionary indent means to …

“Start (a line of text) or position (a block of text, table, etc.) further from the margin than the main part of the text.”

In other words it is like saying you push an element in from the left side to a position you designate.

So how far can we push it?  Just like in the grid layout, we can also divide this into 12 equal parts.  This time, though, there is no gutter to think about and the only thing we need to think about it is the value in percent, not in pixels.


Time for some math again, just to show you how it was computed.

  • offset1:  (1/12)*100=8.3333333%
  • offset2:  (2/12)*100=16.6666667%
  • offset3:  (3/12)*100=25%
  • offset4:  (4/12)*100=33.3333333%
  • offset5:  (5/12)*100=41.6666667%
  • offset6:  (6/12)*100=50%
  • offset7:  (7/12)*100=58.3333333%
  • offset8:  (8/12)*100=66.6666667%
  • offset9:  (9/12)*100=75%
  • offset10:  (10/12)*100=83.3333333%
  • offset11:  (11/12)*100=91.6666667%
  • offset12:  (12/12)*100=100%

In plain English it means … if you want to indent an element by 8.33% then apply offset1, if you want to indent an element by 16.67% you apply offset2, if you want to indent an element by 25% then apply offset3, etc.

Simple, right?

As for the css, it will look like this:

.offset1 {
	margin-left: 8.3333333%;
.offset2 {
	margin-left: 16.6666667%;
.offset3 {
	margin-left: 25%;
.offset4 {
	margin-left: 33.3333333%;
.offset5 {
	margin-left: 41.6666667%;
.offset6 {
	margin-left: 50%;
.offset7 {
	margin-left: 58.3333333%;
.offset8 {
	margin-left: 66.6666667%;
.offset9 {
	margin-left: 75%;
.offset10 {
	margin-left: 83.3333333%;
.offset11 {
	margin-left: 91.6666667%;
.offset12 {
	margin-left: 100%;

Just as with the grid layout we designated these as classes because the premise is, we will most likely be using them several times on a page.

Is it possible to use the grid layout and the offset at the same time?

Absolutely!  It all depends on your design needs.  In the meantime, have fun experimenting with your web layout while using these. 🙂