Creating a responsive web layout using a grid

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 (or col)Width (Pixels)Width (Percent)Gutter (Pixels)Gutter (Percent)OffsetMargin-left
430031.25% 101.0416666667%433.3333333%

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%
span2span1x2=160-20=140;therefore, (140/960)x100=14.5833333333%
span3span1x3=240-20=220;therefore, (220/960)x100=22.9166666667%
span4span1x4=320-20=300;therefore, (300/960)x100=31.25%
span5span1x5=400-20=380;therefore, (380/960)x100=39.5833333333%
span6span1x6=480-20=460;therefore, (460/960)x100=47.9166666667%
span7span1x7=560-20=540;therefore, (540/960)x100=56.25%
span8span1x8=640-20=620;therefore, (620/960)x100=64.5833333333%
span9span1x9=720-20=700;therefore, (700/960)x100=72.9166666667%
span10span1x10=800-20=780;therefore, (780/960)x100=81.25%
span11span1x11=880-20=860;therefore, (860/960)x100=89.5833333333%
span12960-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:

[pastacode lang=”css” manual=”%2F*%20GRID%20LAYOUT%20*%2F%0A.span1%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%206.25%25%3B%0A%7D%0A.span2%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2014.5833333333%25%3B%0A%7D%0A.span3%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2022.9166666667%25%3B%0A%7D%0A.span4%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2031.25%25%3B%0A%7D%0A.span5%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2039.5833333333%25%3B%0A%7D%0A.span6%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2047.9166666667%25%3B%0A%7D%0A.span7%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2056.25%25%3B%0A%7D%0A.span8%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2064.5833333333%25%3B%0A%7D%0A.span9%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2072.9166666667%25%3B%0A%7D%0A.span10%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2081.25%25%3B%0A%7D%0A.span11%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2089.5833333333%25%3B%0A%7D%0A.span12%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%20%20%09width%3A%2097.9166666667%25%3B%0A%7D%0A” message=”” highlight=”” provider=”manual”/]

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:

[pastacode lang=”markup” manual=”%3Chead%3E%0A%20%20%3C!–%20%20I%20am%20adding%20a%20stylesheet%20here%20just%20to%20define%20%0Athe%20class%20%22left%22%20which%20I%20will%20use%20in%20the%20code%20below.%20–%3E%0A%20%20%3Cstyle%3E%0A%20%20.left%20%7B%20float%3A%20left%3B%7D%20%0A%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cdiv%20class%3D%22span1%20%20left%22%3ESPAN1%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22span2%20%20left%22%3ESPAN2%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22span3%20%20left%22%3ESPAN3%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22span4%20%20left%22%3ESPAN4%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22span5%20%20left%22%3ESPAN5%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22span6%20%20left%22%3ESPAN6%3E%3C%2Fdiv%3E%0A%3C%2Fbody%3E” message=”” highlight=”” provider=”manual”/]

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:

[pastacode lang=”css” manual=”.offset1%20%7B%0A%09margin-left%3A%208.3333333%25%3B%0A%7D%0A.offset2%20%7B%0A%09margin-left%3A%2016.6666667%25%3B%0A%7D%0A.offset3%20%7B%0A%09margin-left%3A%2025%25%3B%0A%7D%0A.offset4%20%7B%0A%09margin-left%3A%2033.3333333%25%3B%0A%7D%0A.offset5%20%7B%0A%09margin-left%3A%2041.6666667%25%3B%0A%7D%0A.offset6%20%7B%0A%09margin-left%3A%2050%25%3B%0A%7D%0A.offset7%20%7B%0A%09margin-left%3A%2058.3333333%25%3B%0A%7D%0A.offset8%20%7B%0A%09margin-left%3A%2066.6666667%25%3B%0A%7D%0A.offset9%20%7B%0A%09margin-left%3A%2075%25%3B%0A%7D%0A.offset10%20%7B%0A%09margin-left%3A%2083.3333333%25%3B%0A%7D%0A.offset11%20%7B%0A%09margin-left%3A%2091.6666667%25%3B%0A%7D%0A.offset12%20%7B%0A%09margin-left%3A%20100%25%3B%0A%7D” message=”” highlight=”” provider=”manual”/]

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. 🙂

Facebook Comments
Author Image
Penny Tan

Penny has been immersed in the IT industry since the 90s. As a blogger, she started by writing reviews of books she has read, shows (TV, movies, and plays) she watched, food and restaurants she has tried, and later progressed to many topics that interested her. With her love for cooking and baking, it is not surprising that she has started sharing recipes, too. As a web development teacher, it also made sense to her to post her lectures here as well.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: