Create your own simple grid system in CSS

This tutorial will outline the steps required to create your own grid system like the 960.gs or Blueprint CSS frameworks.

Step 1: The basics behind grid systems

Grid systems allow you to create a quick framework using HTML and set CSS styles to set up div tags in to a grid like formation which saves you from having to worry about floating elements and margins etc.

This tutorial is going to focus on a very basic grid that allows you to easily create 1, 2, 3, 4 column layouts. If you are looking for something that has more depth to it and more flexibility, it will be better to look at 960.gs or Blueprint CSS, as they will provide you with a lot more options on how you want to display your content.

Step 2: The start of the CSS

We need to set up some basic CSS rules to set up our grid elements or cells so that they line up in a grid like we want them to.

<?php.cell, .cell-2, .cell-3 {
  float: left;
  display: inline;
  margin: 0 10px;
  position: relative;
}
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
?>

Our first rule is setting the cell to float and display inline with a 10px margin on the left and right. The next two rules allow us to remove the margin if we need to from the first rule. So with the following HTML, the second cell would have no right margin.

<?php<div class="cell"><p>Text</p></div>
<div class="cell omega"><p>Text</p></div>?>

To make sure our cells line up properly on different rows we need to wrap them with another div which we will give the class grid.

<?php.grid, .grid-2, .grid-3, .grid-4 {
  clear: both;
  overflow: hidden;
  margin-bottom: 1.5em;
}?>

This makes sure that the div is a new row if the row above doesn't use the full width.

Step 3: The mathematics

The basis of grid systems is some simple mathematics. If you look at the 960.gs size and the column counts available, you can see that they are divisable to a whole number. 960/12 = 80 and 960/16 = 60.

To be able to start off with the maths, you need to decide on the width of the wrapper of the whole page. Take in to account the different resolutions that people use. At the moment the majority of users are using 1024x768, so the width shouldn't be any more than 1000px wide (also take in to account a scrollbar on the right).

For this tutorial I am going to show the maths for a grid system with a width of 960px.

So we need to set the CSS for this:

<?php.container {
  width: 960px;
  margin: 0 auto;
}?>

To work out the width of a single cell that fills the full width of the wrapper we need to divide the width of the container by the number of columns (in this case 1) then minus 20 (due to the 10px margin on both the left and right).

So; (960 / 1) - 10 - 10 = 940

<?php.grid .cell { width: 940px; }?>

That is the most basic cell in the grid which will fill up the whole width of the container with the margins.

Now lets work out the width needed for a 2 column layout.

(960 / 2) - 10 - 10 = 460

<?php.grid-2 .cell { width: 460px; }?>

This would be displayed using the following HTML:

<?php<div class="container">
  <div class="grid-2">
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
</div>?>

Let's work through it backwards to make sure the maths works out. 460 + 460 = 920. That is the total width of the available content areas. But on top of that we need to add our margins in, we have the 10px on the far left, then there are 2 lots of 10px margins in the very centre of the grid and the last 10px at the very far right side of the grid making a total of 960px.

A 3 column layout can container 3 cells or 2 cells where one of the cells is the size of 2 single cells. So lets see how that works.

(960 / 3) - 10 -10 = 300

<?php.grid-3 .cell { width: 300px; }?>

So, 3 x 300px = 900px + (20px x 3) = 960px. That is the CSS needed for 3 single cells.

<?php<div class="container">
  <div class="grid-3">
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
</div>?>

There are 2 easy ways to find out the width of the 2 cell.

One way, is to take the result of the single cell which in this case is 300, then add that on again to make 600. We then need to add 20 to that to take in to account the margin that is no longer needed between the cells.

((960 / 3) - 20) + ((960 / 3) - 20) + 20 = 620

The other way is to do the original sum without taking the margins off until you have the full width of 2 cells, like so:

((960 / 3) * 2) - 20 = 620

So the CSS would like this:

<?php.grid-3 .cell-2 { width: 620px; }?>

With the HTML like this:

<?php<div class="container">
  <div class="grid-3">
    <div class="cell-2"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
</div>?>

We then use exactly the same principles for the 4 column layout.

Single cell: (960 / 4) - 10 - 10 = 220
Double cell: (220 + 220) + 20 = 460
Triple cell: (460 + 220) + 20 = 700

<?php.grid-4 .cell { width: 220px; }
.grid-4 .cell-2 { width: 460px; }
.grid-4 .cell-3 { width: 700px; }?>

Which would give you the following combinations available:

<?php<div class="container">
  <div class="grid-4">
    <div class="cell-3"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
  <div class="grid-4">
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
  <div class="grid-4">
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
    <div class="cell-2"><p>Text</p></div>
  </div>
</div>?>

Step 4: The result

The result should be the following:

<?php.container {
  width: 960px;
  margin: 0 auto;
  padding: 1.5em 0;
}
.grid, .grid-2, .grid-3, .grid-4 {
  clear: both;
  overflow: hidden;
  margin-bottom: 1.5em;
}
.cell, .cell-2, .cell-3 {
  float: left;
  display: inline;
  margin: 0 10px;
  position: relative;
}
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
.grid .cell { width: 940px; }
.grid-2 .cell, .grid-4 .cell-2 { width: 460px; }
.grid-3 .cell { width: 300px; }
.grid-3 .cell-2 { width: 620px; }
.grid-4 .cell { width: 220px; }
.grid-4 .cell-3 { width: 700px; }?>

I have tidied up the code slightly, as the width for a 2 column cell is the same as a double cell in a 4 grid system.

If you look at the source code for this site, you will see that there are 2 sets of widths defined. This is to cater for larger screens. A piece of javascript is triggered as soon as the page has finished loading and any resizing of the browser window which applies a class called wide to the body of the HTML. If the window width is larger than 1200px then the site will be displayed in a larger grid system. You could do the same using a stylesheet switcher to be able to change from a narrow to wide theme.

Comments

[...] the rest here: Create your own simple grid system in CSS « James Tombs Share and [...]

Nice article but hard to follow since you don't provide any image to make the explaination easy to understand anda follow.