CSS Grid Layout. Fast start

Introduction

Hello. February-March 2017 was remembered for many who work with HTML and CSS by the fact that most browsers have released updates, among which were updates for CSS. Now you can use the CSS Grid Layout specification without flags in the following browsers: Firefox 52 , Chrome 57 , Opera 44 , Safari 10.1 . Which browser was left behind, I think you can guess. More precisely, it supports the old version of the specification . But the developers of this browser are doing everything possible to introduce a new specification. The introduction of support for the new CSS Grid Layout specification is the most significant event in the past five years. This specification will change completely the approach to the development of user interfaces. And that's cool.

I use Flexible Box Layout

Many people ask: “Stop, I use flexbox, why do I need some more grids?”. The question is more than relevant. CSS Grid does not replace the Flexbox and vice versa. The first difference is that the Flexbox only works in one dimension. From this it follows that we can only place flex elements along the main axis or along the transverse axis. We cannot place flex elements on several axes at once. CSS Grid, in turn, allows us to work with markup in two-dimensional space and align content in both dimensions. I like how Tab Atkins explains this difference .

One of the biggest problems in developing user interfaces is that when changing the design, functionality or behavior of any block, it is necessary to change its layout (in most cases). CSS Grid allows you to change the layout of grid elements without changing the HTML itself. Below is an example of simple layout on Flexbox and CSS Grid.
')

Basic terms

Before you start working with CSS Grid, you need to understand the basic terms. Based on these terms, the entire specification is built.

Grid container is a set of intersecting horizontal and vertical grid lines that divide the grid grid space into grid areas in which grid elements can be placed. Inside the grid container there are two sets of grid lines: one defines the axis of the columns, the other defines the axis of the rows.

Grid lines are the horizontal and vertical grid delimiters of the container. These lines are on either side of a column or row. An author can set a name or numeric index for this element that can be used further in styles. Numbering starts from one. An important nuance, this element is susceptible to the writing mode that is used on your resource. For example, if you use Arabic or any other language whose right-to-left writing mode, the line numbering will start from the right side.

Grid track is the space between two adjacent grid lines, vertical or horizontal.

A grid cell is the smallest indivisible unit of a grid container that can be referenced when positioning grid elements. It is formed at the intersection of the grid row and grid column.

A grid area is the space inside the grid of a container into which one or more grid elements can be placed. This element can consist of one or more grid cells.

Each element is closely related to each other and is responsible for a certain part of the grid container.

The first CSS grid layout

We understand the basic terms. It's time to make our first grid layout. Nothing complicated, a simple layout of three lines on three columns to deal with the basics. Below you can see an example.

In the first version of the example, we create three columns 150px 1fr 150px and three rows 50px auto 50px respectively. Pay attention to such values: 1fr , auto . Let's see what these values are.

1fr is a special unit of measure entered in this specification. It is not measured in any specific units of measurement ( px , em , rem , etc.) From this it follows that we cannot use it with the calc() function. This unit can not be less than one, and also can not take negative values. It is calculated after all other values other than fr have been calculated.

auto - behaves quite interestingly and uses a sly algorithm for calculating sizes. In some situations it may seem that this unit of measure works in the same way as fr . But it is not. The main difference is that auto will be calculated before fr is calculated. This must be remembered. You can see this behavior from the second and third options of the example given above.

The following rules are used for marking up columns and lines:

 grid-template-columns: 150px 1fr auto; grid-template-rows: 50px auto 50px;

The abbreviated form of the record looks like this:

 grid-template: 50px auto 50px / 150px 1fr auto;

Typical grid pattern

Let's make a simple template with which we are all familiar. Nothing complicated, the template will consist of the following tags: header , nav , aside , article , footer . The vast majority of online resources use this template. Only you know, even in such a simple template the following problem is observed: “I am a designer, I want it so much. I'm a developer, I can't do that. ” With the advent of CSS Grid Layout, this problem should tend to zero.

In this example, we are familiar with several CSS Grid Layout properties. The first grid-template-areas . It is used to create named container grid regions that are not associated with any particular grid element. The syntax is very convenient, we immediately see what the pattern will turn out on the output. The second property is the grid-area . It is used for the container's grid child. Indicates in which named area to place the grid element.

Let's look at the first grid-template-areas :

 grid-template-areas: "header header" "nav main" "footer ."

One or more consecutive characters . (dot) have special meaning. If this symbol is used, the browser will render it as a zero token, which in turn means the following: in its place the named grid area of the container will not be created and the grid element cannot be placed in it.

If we have not specified a grid-area property for a child grid element, the browser will automatically distribute such elements. This behavior can be seen from the last option, the above example.

useful links

Instead of conclusion

In this article, we looked at just the tip of the CSS Grid Layout iceberg. I began to pay attention to CSS Grid Layout even when all browsers supported it for flags. This text is not able to convey my impressions of working with this specification. Sometimes it's hard to believe what your eyes can do with CSS Grid. This is the gap of all patterns. And I like it.

I advise you to pay attention to this specification and spend some of your time studying it. Believe me, in the future it will definitely come in handy and it does not matter, you write on React, Angular, Vue (insert your own). Grid'y come for a long time.

Finally, add an example with an arbitrary appearance of the grid element in different named areas.

That's all. Thanks for attention. Who read to the end, special thanks.

Source: https://habr.com/ru/post/325760/

All Articles