Basic CSS Grid Theory

In this exercise, we will make a couple of basic grid systems in order to build an understanding of how they work.

The first one, which will be a fixed width grid, is basically a simplified version of the most famous web grid system, Nathan Smith’s 960 Grid System (https://960.gs).

First of all, make a new folder on your Desktop. Call it “GridSystems.” Download the HTML5 skeleton file and put it in that folder. Rename it to “index.html” and change the TITLE to Homebaked Grid System.

Do a Google search for normalize.css. This is a stylesheet we will connect to our document in order to reset or neutralize differences between browsers. Download the latest version of normalize.css and connect it to your index.html page.

Make another stylesheet and call it pixelgrid.css. In the head of your document, add the necessary link to your stylesheet. Be sure to put that link after the one to the normalize stylesheet.

Now, in the pixelgrid.css stylesheet, add the following style:

.container12 {
width: 960px;
margin-left: auto;
margin-right: auto;
}

That will just make us a wrapper, centered in the middle of the page, with a width of 960px. It will hold all of our grid elements.

Next, add the following declaration. If we separate elements with commas in our style declarations, it means that all of the elements will receive the same properties.

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
float: left;
display: inline-block;
margin-left: 10px;
margin-right: 10px;

min-height: 5em;
border-radius: .5em
background-color: #ccc;
}

The important thing here are the first four properties. What we’re doing is floating all of these classes to the left and giving them a left and right margin of 10px.

The last three lines are included here for the demonstration, but wouldn’t normally be needed. They’re being used because this basic example isn’t going to have any content, just a bunch of grey boxes.

Now add the following styles. To begin, we’ll give the first column a width of 60px.

.col1 {
width: 60px;
}

This means, of course, that .col1 actually takes up 80px of width. Remember that it has 10px of margin-left and 10px of margin-right.

We must therefore take that into account when we give .col2 a width.

.col2 {
width: 140px;  /* 60 + 20 (margin) + 60 */
}

We give it 140px because the first column takes 60px, then there are 20px of margin between it and the second column. And the second column itself takes 60px additional space.

In other words, we’re adding 80px for each successive column.

.col3 {
width: 220px; /* 140 + 20 + 60 */
}

.col4 {
width: 300px; /* 220 + 20 + 60 */
}

.col5 {
width: 380px; /* 300 + 20 + 60 */
}

.col6 {
width: 460px;
}

.col7 {
width: 540px;
}

.col8 {
width: 620px;
}

.col9 {
width: 700px;
}

.col10 {
width: 780px;
}

.col11 {
width: 860px;
}

.col12 {
width: 940px;
}

So why isn’t .col12 set to 960px? Remember that it has 10px of margin-left and 10px of margin-right.

You now have a grid system.

Open the HTML page, insert a block-level element like a DIV, a SECTION, a HEADER, etc and give it a class of container_12. Inside that element, put in more block-level elements and give them the colXX classes, taking care that each row adds up to 12.