Grid Design or Layout with Grid.
I paid attention to the Grid technique about a year ago. Then this technique, after a very superficial study, seemed useless and very experimental, repelled by the fact that for implementations it was necessary to create an extra markup. But now it becomes difficult not to notice the number of web sites 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 less real conclusions. My conclusion a year later is this: “This is a simple and useful solution that was ever created for web page layout, every self-respecting web designer should know.”
Everyone knows who the grid has ever worked with graphic editors (Photoshop, Fireworks, Gimp, etc.) and of course appreciated its necessity in creating any design. But how to implement the Grid on the web? In essence, Tabular layout was the most real design of web pages with the Grid, undoubtedly very convenient. But not the intended use of table elements horrified.
Fortunately, the enormous popularity of web standards, which has grown and continues to grow in recent years, as well as their support for modern browsers, have enabled us to create multi-functional pages with very small, logical markup. This layout was called Block . But Block layout also had a weak side. When creating pages with a huge set of elements of various sizes and meaning, the markup of such pages has become very difficult, and if more than one person works on the markup, such work can become a nightmare.
And here came to the rescue technique using the grid. This technique is a hybrid between Block and Tabular layout. Its use gives us:
The fee for all this is just a little extra markup. I think nowadays when the cost of a man of hours is much more expensive than iron and productivity, it is not difficult to guess which way the scale is leaning.
What is layout with Grid? First of all, this is a concept. A concept that includes many aspects of design 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 many different ways. If you have already read about the Grid, you may have noticed that each author starts from a new direction, delving far into the details, to put it mildly, it confuses. Fortunately, Grid Systems began to appear - CSS libraries for working with Grid. And using 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 your own simple Grid System .
')
First you need to learn that the grid consists of columns and gaps between them. The three basic 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 width of 950 pixels in 16 columns with intervals of 10 pixels, it turns out that one column should be 50 pixels wide. Having understood all the quantities, we open any graphic editor known to us and create a layout. It is also possible to add indents to the Grid from the left and from the right, let's say 20 pixels each and that turns out a layout 990 pixels wide. You can see my example here .
Now you can start creating our library. Like most CSS libraries, our need for a global reset, I suggest a CSS Reset from Eric Meier , saving reset.css and creating a grid.css in 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 our columns. The width of each container is equal to the width of our grid.
Now you can add a rule for our columns, it contains the width and indent. The indent serves as a gap (gutter) between the columns.
For the last column, indent is not needed, for this we add a rule for it:
Our containers contain columns, columns are floating blocks, so they have to be cleaned. To avoid unnecessary .clearfix in the markup, you can apply this rule for containers:
Now we can proceed to our columns. Columns can be two-three wide and so on. To do this, we can apply the following rules to them:
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 the layout. Create main.css and add to it:
This is how layout can look like:
I think this is enough for a start.
My example can be viewed here or downloaded here .
Here are a couple of great resources about the Grid:
Page of Mark Balton and his Five grid design systems .
The page of Koya Vina and its Grid Computing ... and Design , as well as Grids Are Good .
Site dedicated to layout with Grid Design By Grid .
Everyone knows who the grid has ever worked with graphic editors (Photoshop, Fireworks, Gimp, etc.) and of course appreciated its necessity in creating any design. But how to implement the Grid on the web? In essence, Tabular layout was the most real design of web pages with the Grid, undoubtedly very convenient. But not the intended use of table elements horrified.
Fortunately, the enormous popularity of web standards, which has grown and continues to grow in recent years, as well as their support for modern browsers, have enabled us to create multi-functional pages with very small, logical markup. This layout was called Block . But Block layout also had a weak side. When creating pages with a huge set of elements of various sizes and meaning, the markup of such pages has become very difficult, and if more than one person works on the markup, such work can become a nightmare.
And here came to the rescue technique using the grid. This technique is a hybrid between Block and Tabular 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 nowadays when the cost of a man of hours is much more expensive than iron and productivity, it is not difficult to guess which way the scale is leaning.
What is layout with Grid? First of all, this is a concept. A concept that includes many aspects of design 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 many different ways. If you have already read about the Grid, you may have noticed that each author starts from a new direction, delving far into the details, to put it mildly, it confuses. Fortunately, Grid Systems began to appear - CSS libraries for working with Grid. And using 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 your own simple Grid System .
')
First you need to learn that the grid consists of columns and gaps between them. The three basic 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 width of 950 pixels in 16 columns with intervals of 10 pixels, it turns out that one column should be 50 pixels wide. Having understood all the quantities, we open any graphic editor known to us and create a layout. It is also possible to add indents to the Grid from the left and from the right, let's say 20 pixels each and that turns out a layout 990 pixels wide. You can see my example here .
Now you can start creating our library. Like most CSS libraries, our need for a global reset, I suggest a CSS Reset from Eric Meier , saving reset.css and creating a grid.css in 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 our columns. The width of each container is equal to the width of our grid.
.container {
margin: 0 auto;
width: 950px;
}
Now you can add a rule for our columns, it contains the width and indent. The indent serves as a gap (gutter) between the columns.
.column {
float: left;
margin-right: 10px;
overflow: hidden;
width: 50px;
}
For the last column, indent is not needed, for this we add a rule for it:
.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, you can apply this rule for 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 we can proceed to our columns. Columns can be two-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 the 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;
}
This is how layout can look like:
<div class = "wrapper overlay"> <div class = "container"> <div class = "column"> </ div> <div class = "column span-4"> </ div> <div class = "column span-11 last"> </ div> </ div> </ div>
I think this is enough for a start.
My example can be viewed here or downloaded here .
Here are a couple of great resources about the Grid:
Page of Mark Balton and his Five grid design systems .
The page of Koya Vina and its Grid Computing ... and Design , as well as Grids Are Good .
Site dedicated to layout with Grid Design By Grid .
Source: https://habr.com/ru/post/23792/
All Articles