Grid Design or layout with Grid.

I noticed the Grid technique about a year ago. Then this technique, after a very superficial study, seemed to me useless and very experimental, repelled the fact that for implementations it was necessary to create extra markup. But now it is becoming difficult not to notice the number of websites built on the grid, as well as the number of articles and lessons about it. Thanks to the latter, it has become much easier to study and understand the principles and concept, to draw more or less real conclusions. My conclusion a year later is: “This is a simple and useful solution that has ever been created for the layout of web pages, every self-respecting web designer should know.”

What is a grid everyone knows who has ever worked with graphic editors (Photoshop, Fireworks, Gimp, etc.)And of course I appreciated its necessity when creating any design. But how to implement Grid on the web? As a matter of fact, Tabular Layout was a real web page design with a Grid, undoubtedly very convenient. But the misuse of table elements was horrifying.
Fortunately, the huge popularity of web standards, which has grown and continues to grow in recent years, as well as their support by modern browsers, has given us the opportunity to create multi-functional pages with very little, logical markup. This layout is called Block . But also with Blockylayout was the weak side. When creating pages with a huge set of elements of various sizes and in meaning, marking up such pages has become a very difficult task, and if more than one person is working on the markup, such work can become a nightmare.
And now the equipment using the Grid came to the rescue. This technique is a hybrid between Block and Table layout. Its use gives us:

• speed and ease of development
• freedom of positioning
• proportionality of page elements and their placement

The fee for all this is just a little extra markup. I think these days when the cost of a person’s hours is much more expensive than iron and productivity, it’s easy to guess which way the scales are leaning.

What is grid layout? First of all, this is a concept. A concept that includes a lot of design aspects and very few rules for its implementation. This gives complete freedom and no standardization in its execution. I will say even more - the same Grid can be implemented in a variety of ways. If you have already read about Grid, you might notice that each author starts from a new perspective, delving deep into details, to put it mildly, into confusion. Fortunately, Grid Systems began to appear.- CSS libraries for working with the Grid. And on their example, you can very quickly master the basic principles of this technique.

I think it makes no sense to write about all aspects of the Grid; you can safely find information about it on the Internet. I propose to create my simple Grid System .

First you need to understand that the grid consists of columns and spaces between them. The three main values ​​are the width of the grid, the width of the column, and the width of the gap between the columns. The width of the columns depends on their number.

Let's try to make a grid 950 pixels wide in 16 columns at intervals of 10 pixels, it turns out that one column should be 50 pixels wide. Having understood all the values, we open any graphically known editor and create a layout. To the Grid, you can also add indentation from left and right, for example, 20 pixels each, and this results in a 990-pixel-wide layout. You can see my example here .

Now you can start creating our library. Like most CSS libraries ours needs a global reset, I suggest CSS Reset from Eric Mayer , save reset.css and create a grid.css into which we can immediately add a method for cleaning containers containing floating blocks -Clear fix . The first thing we need is a rule for a container that will contain all of our columns. The width of each container is equal to the width of our grid.

.container {
margin: 0 auto;
width: 950px;
}

Now we can add a rule for our columns, it contains width and indentation. Indentation acts as a gutter between columns.

.column {
float: left;
margin-right: 10px;
overflow: hidden;
width: 50px;
}

Indentation is not needed for the last column, for this we add a rule for it too:

.last {margin-right: 0; }

Our containers contain columns, columns are floating blocks, so they have to be cleaned. To avoid unnecessary .clearfix in the markup, this rule can also be applied to containers:

.clearfix: after, .container: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix, .container {display: inline-block; }

/ * Hides from IE-mac \ * /
* html .clearfix, * html .container {height: 1%;}
.clearfix, .container {display: block;}
/ * End hide from IE-mac * /

Now you can proceed to our columns. Columns can be two or three wide and so on. To do this, we can apply the following rules to them:

.span-1 {width: 50px; }
.span-2 {width: 110px; }
.span-3 {width: 170px; }
.span-4 {width: 230px; }
.span-5 {width: 290px; }
.span-6 {width: 350px; }
.span-7 {width: 410px; }
.span-8 {width: 470px; }
.span-9 {width: 530px; }
.span-10 {width: 590px; }
.span-11 {width: 650px; }
.span-12 {width: 710px; }
.span-13 {width: 770px; }
.span-14 {width: 830px; }
.span-15 {width: 890px; }
.span-16 {width: 950px; margin-right: 0; }

In principle, this is all that is needed for the implementation of the Grid; you can also add a wrapper and a class to view the Grid with a layout. Create main.css and add to it:

.wrapper {
margin: 0 auto;
width: 990px;
}
.overlay {
background: transparent url (overlay.png) repeat-y scroll top left;
}

Here's what the layout might look like:

I think that's enough for a start.
My example can be viewed here or downloaded here .

Here are a couple of great resources on the Grid:
Page Mark Balton and his ' em Five the Simple Steps to Designing Systems of grid .
Page of Koya Vin and his Grid Computing ... and Design , as well as Grids Are Good .
Website dedicated to layout with Design By Grid Grid .