How to Create a Responsive CSS Grid Layout. Assigning Areas Templates and Experiments

• Youtube

Div#navbar ul ( list-style: none; display: block; margin: 0 10px; ) div#navbar ul li ( float: left; margin: 0 1.5em; font: bold 1em Arial; )

Cool! Everything is going well for us. All that remains is a block with a poster and a presentation of the site, but before we start implementing them, I would like to say a few words about CSS frameworks in general.

3. CSS frameworks will not solve all your problems

Before you start laying out your design using a CSS framework, you should take into account some of the disadvantages of these systems. While reading this article, you couldn’t help but notice that the rules for building a page are very strict. Everything has its own fixed size. When you change the width of one block, you have to change others. In any case, something must be sacrificed. For example, what will you do if you have a 1000px design, and 960 Grid allows you to create a maximum width of 960px... And you want 1000px! Without a massive code change, this is impossible to implement. For example, the client wanted a wider site or the designer disagrees with your implementation. There is another problem regarding the height of the speakers. If three columns have the same background color (like our footer), it is necessary that these columns be the same height. Another significant disadvantage: the use of additional indents and the creation of frames leads to the destruction of the entire layout. In order to add what is necessary and not destroy anything, you need to compensate for the added dimensions. Now I'll show you how. Let's start finishing the top part.

4. Upper section

First, let's solve the problem with the column height - make it fixed. Next, let's create empty divs in one and the other block. They will contain a drawing or text information. We will not set internal paddings because... you can upset the proportion of the grid width. Let's create a small outer indent for the p tags so that the text looks nice.

In this case, it is better to create a class for the style rather than an ID, because we need to apply it to several blocks. If necessary, this will also allow us to change the height in 2 counts. This is what our classes look like:

Div.topSection div ( border: solid 10px #e5e5e6; height: 280px; ) div.topSection div p ( margin: 10px; )

Cool! Let's see what we got:

Ready to fill out? Then add some text to the left block, but don’t overdo it so as not to exceed the height. In fact, in real projects, the designer must calculate all this (the number of characters that will satisfy the block size); Before you insert an image into the right block, you need to decide on its dimensions, if you have not already done so. This can be done early in the design or through FireBug. Click Inspect. Click on the div we need. Select the Layout tab. After this you will see all the information you need. The following image will help you:

In the screenshot, the poster measures 360x280. Find an image and style it:

Img#poster ( width: 360px; height: 280px; )

That's all! The template is ready. Now all that remains is to fill it with real content and post it online:

5. Know your options

Now that everything is ready, let's summarize. 960 Grid allowed us to rivet a template in 15 minutes. Cool? Yes! Have we tested it in IE6, IE7? No! Must? No. This is just the beginning! So what's now? Now you need to show it to the customer and see the reaction. If he is satisfied with this, then we can start testing, but if not, and the customer wants something more complicated, then he will have to write everything from scratch himself. I'll repeat it again. CSS frameworks do not solve all problems. Despite this, thousands of developers use them as a regular web development tool because, like any tool, CSS frameworks have their own field for wide application. In any case, if the design requests are not super specific (80% of cases), then using 960 Grid you can save a lot of time - and time is money!

This article shows how this comparative new technology, it works, and not just a description of properties with superficial examples.

The article itself is a responsive augmented translation of CSS Grid Tutorial

The CSS Grid module was developed by the CSS Working Group to provide the best way to create templates in CSS. It was included in the Candidate Recommendation in February 2017, and major browsers began supporting it in March 2017.

CSS Grid will soon become an integral part of any front-end developer's toolkit. And if you're one of them, then you'll have to learn CSS Grid — which will almost certainly be a non-negotiable skill for any front-end development position.

With this powerful functionality and intuitive syntax, grid templates will undoubtedly change the way the web is built.

Introduction

CSS Grid is new model template, optimized for two-dimensional templates. This is an ideal model for website templates, forms, galleries and anything that requires precise and responsive positioning.

With the development of the web in last years, developing website templates has become increasingly difficult. In the early days of the web, HTML tables were often used for multi-column templates, forms, etc. But this method has its drawbacks. This means that the presentation had to be done at the markup level, so there was no distinction between the presentation and the content. In fact, tables were created to contain tabular data, not to create templates. And without touching on semantic issues, table templates are not created for responsive design.

Floats eventually replaced table templates as the universally accepted and recommended method for creating templates, as it allows us to position elements independently of the layout. However, while this method was considered a significant improvement over tabular layout, it also had its limitations. Floats were primarily designed for document templates and were not suitable for the complex application templates that are now common on the web. Floating elements are difficult to control, especially on devices and viewports different sizes. This led to various grid-like hacks that became the norm, most of them requiring additional markup that detracted from the whole concept of separating content. So the CSS Working Group was looking for a better solution.

The CSS Grid model addresses these issues and more. It allows you to create advanced templates in a fraction of the time you would spend on them with fleets and with less coding.

But of course one could use different meanings, such as 100px , 7em , 30% and so on. You can also assign names to strings along with their sizes.

grid-template-columns: 1fr 1fr 1fr

Same as above, only defines columns in grids.

Exposes a gap. That is, spaces between grid elements. Here we use a vw unit of length, which is relative to the width of the viewport, but we can also use 10px, 1em, etc. The grid-gap property is shorthand for the grid-row-gap and grid-column-gap properties.

Well, the other part of the code simply assigns different styles to the grid elements.

#grid >

repeat() function

You can use the repeat() function to make repeated declarations of an element's size value. For example, instead of doing this:

Grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

We can do this:

Grid-template-rows: repeat(5, 1fr);

Which will significantly reduce the amount of code you need to write, especially if you are working with large and repeating grids.

Creating a Website Template with CSS Grid

Grids include an intuitive "ASCII graphics" syntax in which you can virtually "see" the template in the code, making it very easy to create and modify your template. Even significant changes can be made in a few seconds. This intuitive syntax also helps with responsive web design. Creating different templates for different devices becomes quite a breeze when using grids.

Let's now create a website template that looks like this:

And here is the code for this template:

Let's take a closer look at our code. The HTML markup looks like this:

And so we will do grid container, so all other elements become grid elements.

Now let's look at the ASCII graphics we talked about before.

Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;

This piece defines our template. Just looking at the code, we can see that it is a 3x3 grid (three rows and three columns). This gives us five grid areas on nine grid cells, since some grid areas span multiple cells.

We also see that the header occupies the entire first row of three cells, and the footer occupies the entire bottom row, also taking up three cells. The navigation, content and advertising sections all share space in the second row, where each of these elements gets one cell.

Now we can assign each of these grid areas to each element:

#pageHeader ( grid-area: header; ) #pageFooter ( grid-area: footer; ) #mainArticle ( grid-area: article; ) #mainNav ( grid-area: nav; ) #siteAds ( grid-area: ads; )

The grid-area property is a shorthand property that allows you to place grid elements on a grid. In our case, we simply refer to the names that we previously specified in grid-template-areas.

Most of the template is already completed. The rest of the code will simply deal with dimensions, spaces and heights, generally more of a decorative area.

The following code gives the sizes of rows and columns:

Grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%;

The first and third lines are both 60px high, and the second line takes up all the remaining space.

The first column is 20% and the third is 15%. The second one takes all the remaining space.

Changing the template

You can change the template simply by rearranging the grid areas in grid-template-areas .

So if we change to this:

Grid-template-areas: “nav header header” “nav article ads” “nav footer ads”;

As a result, we get the following template:

However, you may need to adjust the dimensions if you move a smaller grid to a larger location.

For example, to do this:

The navigation now takes up the space where the content was, hence the dimensions have been adjusted. Otherwise, we would have narrow content and wide navigation. So the code now looks like this.

Grid-template-areas: “header header header” “article nav ads” /* Before this there was “nav article ads” */ “footer footer footer”; grid-template-rows: 60px 1fr 60px; grid-template-columns: 1fr 20% 15%; /* Before this it was ‘20% 1fr 15%’ */

Creating an adaptive Grid

The grid template has values ​​such as auto-fill and auto-fit that allow you to create a grid with many tracks of a certain size that will fit into a container. This could mean that the grid is responsive, meaning that elements change position as you resize the browser window.

Example of using Auto-fill:

Here's the result:

The code responsible for this:

Grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

In it, columns are given a minimum size of 150px and a maximum of the remaining space. Such tracks will be repeated as many times as necessary to fit into the container.

The Repeat() function repeats the track definition the number of times specified by the first parameter. Using auto-fill will cause the tracks to repeat as many times as possible until they fill the container.

The size of these tracks is specified in the second parameter. In our case, we use minmax(150px, 1fr) to indicate that the minimum column size is 150px and the maximum is 1fr.

Auto-fit

auto-fit works much the same as auto-fill. The only difference here is that auto-fit pulls together all empty tracks at the end of the placement, while auto-fill does not. The best way here is a demonstration with comparison.

Using two small grid elements here will help show the whole concept of work. Auto-fill leaves empty tracks at the end at the specified dimensions, and auto-fit stretches the empty track, which results in tracks being filled with stretched elements to fill the space.

Grids with media queries

One of the strengths of grids is that you can create a completely different template in seconds.

This makes grids ideal for media queries. We can simply reassign the values ​​in ASCII graphics and wrap the result in a media query.

This is a three column template on a large viewport and it compresses to a single column on small devices. So this example will look different depending on the screen size. In any case, here is the relevant code for a three-column template for wide viewports.

Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;

And here is the corresponding code for the mobile version:

Grid-template-areas: “header” “article” “ads” “nav” “footer”;

So the whole point is to reassign the values ​​in the grid-template-areas property.

In our case, we wrapped the mobile version in a media query, like this:

@media all and (max-width: 575px) ( body ( grid-template-areas: “header” “article” “ads” “nav” “footer”; grid-template-rows: 80px 1fr 70px 1fr 70px; grid- template-columns: 1fr; ) )

Please note that we have also adjusted the values ​​in grid-template-rows and grid-template-columns to match the new template. In particular, there should be only one column and it should take up all the free space. And since all grid elements will be in one heap, we will assign 5 rows and determine their heights.

Combining grid with block

Depending on your template's requirements, there's nothing stopping you from changing the mobile version to display: block . As here:

@media all and (max-width: 575px) ( body ( display: block; ) )

This will work the same as in the example above, but by default, the elements will appear in their original order. In the example above, the mobile version has a nav below ads, but if we used display: block then the nav would be above ads.

Also using this method, you may also need to add some padding to compensate for the lack of gaps that were included in the grid version.

Explicit and Implicit Grids

CSS Grid uses the concept of explicit grid and implicit grid. This is a key concept that you need to be careful of when creating grids, otherwise you'll end up with a bunch of rows and columns that you never expected were there.

An explicit grid is a grid that you define in grid-template-rows, grid-template-colums, and grid-template-areas.

However, you may still have elements that don't fit into your "explicitly" defined grid. For example, you've defined a grid that can only hold six elements, but the container itself is actually made up of nine elements. Only six elements will fit into the explicit grid and three will remain. And that's where implicit grids come in.

Implicit grids are automatically generated by the grid container whenever grid elements are located outside the explicit grid. The container generates implicit grid tracks by adding implicit rows to the grid. These lines, together with explicit grids, form the implicit ones. Here's an example:

In this example, we explicitly define two rows and two columns, which will accommodate four grid elements. However, there are six grid elements, so an implicit grid was created in order to accommodate the two additional elements.

And that's a very good thing. If the implicit grid had not been created, then the two additional elements would have created a complete mess in the grid.

Setting the track size for implicit grids

You may have noticed that the extra row is not as tall as the previous two. This is because we set the row height in the grid-template-rows property, but it only applies to explicit grids. Row height on implicit grids must be set using the grid-auto-rows property. But since we didn't do this, it turns out that the implicit row uses the auto track size, which is based on the content. This is how the properties for setting the track size are located:

In general it goes like this:

Explicit grid uses grid-template-rows and grid-template-columns

Implicit grid uses grid-auto-rows and grid-auto-columns

In this case, we don't necessarily need to specify the end values ​​on the first element because it only spans one track. The same can be said about the second grid element. By default, if you do not specify an end line, the element will span only one track.

In fact, we didn't need to specify any positioning for the first grid element, since it is at a certain position, it would have been there anyway. But if we had not specified the positioning for the second element, then it would have been located immediately after the first element, occupying only 1 track.

Naming grid lines

You can also name grid lines to make them easier to refer to. This can be done by setting the grid-template-rows and grid-template-columns properties, for example like here:

#grid ( display: grid; /* Set the tracks and name the lines */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; height: 90vh; ) ... /* Now refer to those named lines */ #item2 ( grid-row-start: row3-start; grid-column-start: col2-start; grid-row-end: row3-end; grid-column-end: col3 -end; )

Named lines can be either explicit or implicit. Implicit named lines are created whenever you create named grid areas using grid-template-areas .

The name is taken from the grid area with -start and -end added at the end, depending on whether it is the beginning or the end of the line.

Thus, for each grid area named header, four implicit lines will be created. Two are named header-start and column-start in the named grid area and two are named header-end respectively.

Named grid areas

Grid areas can be named in the grid-template-areas property of the grid container itself. This is what we did before when we created the site template. To restore this in memory, it looks like this:

#grid ( display: grid; /* Name the grid area */ grid-template-areas: “a a” “b c”; ... ) ... /* Now apply each grid element to the named grid area */ #a ( grid-area: a; ) #b ( grid-area: b; ) #c ( grid-area: c; )

You can indicate an empty cell by using a period (.) or a series of periods without spaces. For example:

Grid-template-areas: “a a” “. b"; Or grid-template-areas: “header header” “... content”;

Grid Placement Properties

There are three short properties that can be used in place of the long grid layout properties mentioned in the examples above. This is where they all fit.

grid-area - This property is shorthand for:

grid-column - This property is shorthand for:

grid-column-start — indicates which column line of the grid element is starting and how many tracks it extends to.

grid-column-end  — indicates which column lines the grid element ends on and how many tracks it extends to.

grid-row — this property is shorthand for:

grid-row-start — indicates which row line the grid element starts from and how many tracks it extends to.

grid-row-end  - indicates which row line will be the last for the element and how many tracks it will stretch.

You can also use the grid-auto-flow property, which was mentioned in the chapter before this one. It specifies how automatically placed grid elements should be placed in the grid. Automatically placed elements are those that are not explicitly placed using any of the properties above.

Create a nested grid

Grid elements can themselves become grids in CSS Grid. That is, you can nest a grid element within another grid element, thereby creating a nested grid.

To create such a nested grid, all you have to do is apply display: grid (or display: inline-grid) to the grid element and it becomes a grid itself. You can also use display: subgrid to create a subgrid. , How does this happen.

Inheritance

Most grid properties are not inherited, which means that your nested grid will not inherit the values ​​of its parent grid. This allows you to make changes to the parent grid without unintentionally affecting the child grid.

For example, you set grid-auto-flow: column on the parent grid, but you did not set the property on the nested grid. In this case, the nested grid will be set to row because that is the initial value for this property.

Note that on the parent grid, the numbers go vertically down the columns instead of horizontally along the row, but the nested grid still goes horizontally along the row.

Subgrids

The CSS Grid module sets the subgrid value for the display property. However, not all browsers support it yet. This value should prove quite useful.

Subgrid is a nested grid, but with display: subgrid . This makes it a special type of grid container that participates in setting the grid size of the parent grid container. In other words, the content of the subgrid influences the size of the parent grid, allowing content to be spread across two grids. Below is an example of where this property could be useful.

Here is the list of elements:

• Name:
• Address:
• Phone:

And here is CSS, where the list is a grid, and the list elements are subgrids.

Ul ( display: grid; grid: auto-flow / auto 1fr; ) li ( display: subgrid; grid-column: span 2; margin: 0.5em; border: solid; padding: 0.5em; ) label ( grid-column: 1; ) input ( grid-column: 2; )

This example would show the label and input in a row, with a border around each list item. Giving each list element a subgrid means that there should not be any problems with the alignment of input forms, because each list element will participate in shaping the size of the parent grid.

Auto-placement forms

You can use explicit grids as an advantage when creating forms or any other collection of elements that require grid alignment. For example, you can use explicit grids to create a form like this:

And as you add form elements to your markup, the explicit grid will add rows to accommodate them. So to create the shape on top, we need this markup.

There is no need for additional markings to arrange everything correctly. And also there is no need to add additional classes for form elements. We are adding only one class for

You can automatically add new form elements and they will automatically adjust to others, as they will be placed in an explicit grid.

This is possible because we made the form itself a grid (display: grid applied to .myForm). And then they indicated that labels go in one column, and controls in another.

Here's another example, this time with even more elements:

Once subgrids become widespread among browsers, it will be possible to align form elements that are not direct descendants of