What is a flexible grid in responsive layout? Why is CSS Grid better than Bootstrap framework? Named grid areas

From the author: article from the concept of layout series CSS Grid. In previous lessons, we learned grid syntax, learned several ways to arrange elements on a page, and said goodbye to some old habits. In this tutorial we will put all our knowledge into practice to create a responsive layout.

Media queries

Let's take the demo from the previous lesson.

The page consists of two grids: the main grid and one nested inside one of the elements. We can control our meshes using media queries. This means that we can completely rebuild the layout to fit a different screen width.

We'll start by copying the first grid's declaration. Let's wrap the duplicate into a media query using the mobile-first technique. I arbitrarily took 500px as the transition point.

Grid-1 ( /* grid styles */ ) @media only screen and (min-width: 500px) ( .grid-1 ( /* grid styles */ ) )

Now we'll change our grid in the first ad to put everything in one column. We set one column using the grid-template-columns property. Check that our four rows are set using the grid-template-rows property and match the layout using the grid-template-areas property:

Grid-1 ( display: grid; width: 100%; margin: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; grid-gap: 10px; grid-template-areas: " header" "main" "sidebar" "footer"; )

Grid - 1 ( display:grid; width: 100%; margin: 0 auto; grid - template - columns : 1fr ; grid - template - rows : 80px auto auto 80px ; grid - gap : 10px ; grid - template - areas : "header" "main" "sidebar" "footer" ;

To fit on small screens, we set the grid-gap to 10px by default. This is what we got. You should also notice that we change padding properties and font-size in .grid-1 div elements using media queries.

Our nested grid

The code above modifies our main layout. However, we still have a nested grid that stubbornly refuses to get rid of its two columns on any screen. To fix this, we'll do exactly the same thing, but take a different transition point using the content-first method:

Item-2 ( /* grid styles */ ) @media only screen and (min-width: 600px) ( .item-2 ( /* grid styles */ ) )

If we were to redo the autofill demo and change the column width to minmax(9em, 1fr), the grid would try to fit as many 9em-wide tracks as possible, and then expand them to 1fr until the entire container is full:

Disadvantage: The grid will only recalculate tracks after a reboot, and not when the window width changes. Try narrowing your browser window and refreshing the page. To change the values, you can connect media queries, but they do not work well with changing the width of the browser window.

Conclusion

Let's summarize all of the above in a list:

Media queries allow us to completely rebuild the grid by changing the grid-template-areas property (and others) for different scenarios.

The transition property has no effect on the grid layout.

Good for filling a mesh container keyword auto-fill

The minmax() function is a great addition to autocomplete, but it doesn't give us real adaptability.

Now you are ready to work with meshes! Stay tuned for more CSS Grid articles, hands-on exercises, and solutions to common grid problems.

I noticed the Grids technique about a year ago. Then this technique, after a very superficial study, seemed useless and very experimental to me; I was repulsed by 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 tutorials about it. Thanks to the latter, it has become much easier to study and understand the principles and concepts, and draw more or less real conclusions. My conclusion a year later is: “It’s simple and useful solution which was ever created for the layout of web pages, every self-respecting web designer should know.”

Anyone who has ever worked with a grid knows what a grid is. graphic editors (Photoshop, Fireworks, Gimp, etc.) and of course appreciated its necessity when creating any design. But how to implement a Grid on the web? In fact Tabular the layout was a real web page design with a Grid, undoubtedly very convenient. But not the intended use of elements table was horrifying.
Fortunately, the enormous popularity of web standards has grown and continues to grow over last years, as well as their support in modern browsers, gave us the opportunity to create multi-functional pages with very little, logical markup. This layout was called Block. But also Block layout turned out to be weak side. When creating pages with a huge set of elements of different sizes and meanings, marking up such pages has become a very difficult task, and if more than one person works on the markup, such work can become a nightmare.
And then the technique using the Grid came to the rescue. This technique is a hybrid between Block And Tabular layout. Using it gives us:

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

The price for all this is just a little extra markup. I think these days, when the cost of a person's watch is much more expensive than hardware and productivity, it's not hard to guess which way the scales are tipping.

What is layout with Grid? First of all, it's a concept. A concept that includes many 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 by the most different ways. If you have already read about the Grid, you may have noticed that each author starts from a new angle, going deep into the details, this is, to put it mildly, confusing. Luckily they started to appear Grid Systems - CSS libraries and for working with the Grid. And using their example, you can very quickly master basic principles this technique.

I think it makes no sense to write about all aspects of the Grid; you can easily find information about it on the Internet. I suggest creating your own simple Grid System.

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

Let's try to make a grid 950 pixels wide with 16 columns with 10 pixel spacing, so one column should be 50 pixels wide. Having understood all the values, we open any graphic editor known to us and create a layout. You can also add padding to the Grid on the left and right, say 20 pixels each, and this will result in a layout with a width of 990 pixels. You can see my example.

Now we can start creating our library. Like most CSS libraries ours needs a global reset, I suggest Eric Mayer's CSS Reset, keeping reset.css let's create grid.css to 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 we can add a rule for our columns, it contains the width and padding. The indent acts as a gap (gutter) between the columns.

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

The last column does not need an indentation; to do this, let’s add a rule for it as well:

Our containers contain columns, the columns are floating blocks, so they have to be cleaned. To avoid unnecessary .clearfix in the markup, you can apply this rule 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 we can start with 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 Grid implementations; you can also add a wrapper and a class for viewing the Grid with a layout. Let's 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 this is enough for a start.
You can see my example

I noticed the Grids technique about a year ago. Then this technique, after a very superficial study, seemed useless and very experimental to me; I was repulsed by 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 tutorials about it. Thanks to the latter, it has become much easier to study and understand the principles and concepts, and draw more or less real conclusions. My conclusion a year later is this: “Every self-respecting web designer should know this simple and useful solution that has ever been created for the layout of web pages.”

Anyone who has ever worked with graphic editors knows what a grid is. (Photoshop, Fireworks, Gimp, etc.) and of course appreciated its necessity when creating any design. But how to implement a Grid on the web? In fact Tabular the layout was a real web page design with a Grid, undoubtedly very convenient. But not the intended use of elements table was horrifying.
Fortunately, the enormous popularity of web standards, which has grown and continues to grow in recent years, as well as their support in modern browsers, has given us the opportunity to create richly functional pages with very little, logical markup. This layout was called Block. But also Block layout turned out to be a weak point. When creating pages with a huge set of elements of different sizes and meanings, marking up such pages has become a very difficult task, and if more than one person works on the markup, such work can become a nightmare.
And then the technique using the Grid came to the rescue. This technique is a hybrid between Block And Tabular layout. Using it gives us:

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

The price for all this is just a little extra markup. I think these days, when the cost of a person's watch is much more expensive than hardware and productivity, it's not hard to guess which way the scales are tipping.

What is layout with Grid? First of all, it's a concept. A concept that includes many 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 different ways. If you have already read about the Grid, you may have noticed that each author starts from a new angle, going deep into the details, this is, to put it mildly, confusing. Luckily they started to appear Grid Systems- CSS libraries for working with the 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 easily find information about it on the Internet. I suggest creating your own simple Grid System.

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

Let's try to make a grid 950 pixels wide with 16 columns with 10 pixel spacing, so one column should be 50 pixels wide. Having understood all the values, we open any graphic editor known to us and create a layout. You can also add padding to the Grid on the left and right, say 20 pixels each, and this will result in a layout with a width of 990 pixels. You can see my example.

Now we can start creating our library. Like most CSS libraries ours needs a global reset, I suggest Eric Mayer's CSS Reset, keeping reset.css let's create grid.css to 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 we can add a rule for our columns, it contains the width and padding. The indent acts as a gap (gutter) between the columns.

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

The last column does not need an indentation; to do this, let’s add a rule for it as well:

Our containers contain columns, the columns are floating blocks, so they have to be cleaned. To avoid unnecessary .clearfix in the markup, you can apply this rule 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 we can start with 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 Grid implementations; you can also add a wrapper and a class for viewing the Grid with a layout. Let's 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 this is enough for a start.
You can see my example

Especially for site users, we provide a practical lesson on using the 960 Grid system. Imagine that we were given a design for layout. First, we must outline a plan for implementing the site structure, and only then proceed directly to the code. After studying this article, you will be able to handle any classic layout in the shortest possible time and natural hair color for many years (without gray hair). So here's our design:

1. Create a mesh

As you already know, the 960 Grid system uses a whole range of classes and is available in several variants (12 column and 16 column versions). The main container, regardless of the number of columns, will always be 960px wide. For this design we will choose a 12 column system. Each block in the 960 Grid system has margin(margin) 0 10px. This guarantees us even, proportional padding of 20px. For those who are confused by the 960px size, I advise you to take a look at this diagram. This size is optimal for the vast majority of monitor resolutions. So, we have the ability to create blocks of this width:

• 140px
• 220px
• 300px
• 380px
• 460px
• 540px
• 620px
• 700px
• 780px
• 860px
• 940px

Each size has its own class, the name of which is based on the grid_X scheme, where X is the number of columns. If you need a 960px block, then you should select the grid_12 class. In order to activate the 960 Grid system, you must parent container set the class container_12 or container 16. Below is small example page consisting of 3 blocks. The width of the first one is equal to the width of 960px, the remaining 2 are half as large:

Remember that when you fill a row with blocks with the grid_X class, make sure that in total they add up to no more than 12. For example, like we have - two blocks grid_6 + grid_6 = 12. Less is possible: 6, 4, 2, etc. d. Now that we've gone over the basic principles, we can begin the practical exercise:

2. Create a Mock-Up

Let's try to build a diagram of what we need to make up. First of all, we need 2 blocks of 960px. One for the logo, the other for navigation. Next are 2 blocks (on one line), for a poster and website presentation, a separator block (full width), 4 columns (on one line), again a separator block and a footer. Something like this:

I think after seeing the image you already know what classes we need. Try them out for yourself, and then take a look at the code below to see if you're thinking correctly:

Remember that at the end of each line we need to insert

for normal display in all browsers. Don't forget to also include 960 Grid CSS on your page in the head section.

So, the skeleton is ready, so it's time to start decorating. Set the height and background color block separators. The height of the menu block will depend on the menu itself. Also don't forget to add your logo:

Div.spacer ( background-color: #8FC73E; height: 1em; ) div#navbar ( background-color: #8FC73E; padding: 10px 0; )

This is what we should get:

We are not interested in information at all right now, so you can insert content from here into the central columns this page. Before you get started top part, let's take care of the bottom one. In our design, the footer background is colored grey colour. On this moment we cannot implement this because if you remember, there is some indentation between the blocks that will not allow us to completely paint over this area. To solve this problem, let’s move 3 blocks related to the footer into separate blocks with id = footer. One more detail: when we use classes within classes, it would be good to set the alpha values ​​(in order to indicate which block will be the first and omega - for the last):

Div#footer ( background-color: #e5e5e6; )

Perfect! Our footer now has a background color. Add some text to it and let’s move on to the navigation block. According to all laws modern principles layout, navigation is an unnumbered list. Add the following code and style:

• Articles
• Topics
• About
• Editors
• Contact