Introduction into CSS3 Grid Layout. Working with grids

Preface

CSS3 Grid Layout module is one of the most interesting, to my mind, modules in family of CSS3. Official history of the module as a rough copy of specification counts today a bit less than a year. It should be noted that with a bit different name and some changes in syntax, but with the same essence, it was announced as WD as early as in 2007. Today works on module polishing are going at full speed, there is already a preliminary realization in Internet Explorer 10 and hopefully, the support of new possibilities will also appear in the future versions of other popular browsers.

What for do we need Grid Layout?

A task that the model of CSS3 Grid Layout helps us deal with is very simple and clear to any web-imposer (and not only) it is the possibility to have a comfortable mechanism of content location on a virtual net.

Unlike the old tabular approaches based on the use of table, here semantics of a document stays clear and presentation is clearly dissociated from content. Unlike different variations of sectional markup, which at a difficult structure is overwhelmed with reckless and multistory floats in combination with the manually counted indentions, here the description of styles becomes banally simple and transparent. In comparison with the absolute positioning with attachment to the coordinates, flexibility is saved here. Unlike popular today css/js- libraries for marking on a grid by pointing of corresponding classes (as an example, we can take bootstrap or yui css grids), the attachment of classes is not littered here.

Pure delight! It only remains to wait for a wide support :) However, if you plan to do applications in Metro style for Windows 8 on html/js, the key possibilities described in the CSS3 Grid Layout module already work and it is possible to move forward, using comfortable and practical mechanisms.

Basics

First of all let’s begin with the example, to understand how Grid Layout works. Imagine that you need to decide the classic task of three-column layout markup with approximately the following content:

<section>
    <header>Title</header>
    <nav>Menu</nav>
    <article>Content</article>
    <aside>Notes</aside>
    <footer>Footer</footer>
</section>

Which should be separated on three columns in such a way:

It is a classic task, therefore I will not pay much attention to its decision in case of the use of traditional approaches for a multi-column sectional markup. Let us see what can be done by means of Grid Layout (in examples I skip browser prefixes, however, in practice they should be added for IE this -ms-).

Here is the example of the code on CSS:

section {
    display: grid;
    grid-columns: 150px 1fr 200px;
    grid-rows: 50px 1fr 50px;
}

section header {
    grid-column: 2;
    grid-row: 1;
}

section nav {
    grid-column: 1;
    grid-row: 2;
}

section article {
    grid-column: 2;
    grid-row: 2;
}

section aside {
    grid-column: 3;
    grid-row: 2;
}
                        
section footer {
    grid-column: 2;
    grid-row: 3;
}

In the simplest variant all you should do is to specify in a container (section), that the content inside of it should be located on a grid and set a virtual grid, using properties of grid-columns and grid-rows ( below I will tell you what values they take). Further we should specify the location for every inner element.

That’s all! On the whole:

• Virtual grid: grid-columns and grid-rows in container
• Placing of the element: grid-column and grid-row.

Now let us look through the details and additional possibilities.

Virtual Grid

Tracks: rows and columns

To create a virtual grid on which the elements will be placed it is necessary to describe the Grid Tracks – rows and columns inside the grid:

#grid { display: grid; grid-columns: 150px 1fr; /* two columns */ grid-rows: 50px 1fr 50px; /* three rows */ }

Grid Lines

Tracks are situated between Grid Lines, which, in their turn, are on the right and left and from above and below from every track:

To set how exactly the element will be placed on a grid it is necessary to specify to which line on a vertical line and horizontal it will be attached:

#item {
    grid-column: 2;
    grid-row: 2;
}

By default, the element occupies the space from the indicated line to the following (therefore such numeration coincides with the numeration of cells and all that looks as though as we set in which cell to place the element).

Expansion on a several cells

To expand the element on a few grid cells, it is possible to use properties of grid-row-span and grid-column-span:

#item {
    grid-column: 2;
    grid-column-span: 3;
    grid-row: 2;
    grid-row-span:2;
}

By default, both properties are set in a value 1, that corresponds to tension of accessible space from the indicated line to the following (+1).

Repeated tracks

It often happens that the chosen grid for own usage contains particular template:

#grid {
    display: grid;
    grid-columns:  24px 120px 24px 120px 24px 120px 24px 120px 24px;
    grid-rows: 1fr 24px 1fr 24px 1fr 24px;
}

It would be comfortable to describe such grids in more compact and transparent way – and there is such possibility! The example above can be described in this way:

#grid {
    display: grid;
    grid-columns:  24px (120px 24px)[4];
    grid-rows: (1fr 24px)[3];
}

The template itself is described in parentheses, whereupon the amount of reiterations is specified in square brackets.

===

Now when we know the basic possibilities for description of grid lines, let’s again go back to tracks and try to understand the specifics of the measurement units.

Measurement units

As you already could notice above, here and there I used an unusual value for pointing the sizes of some columns and lines – 1fr. And now we will talk about this and other possible values at specifying the length.

At description of width of columns and height of rows (sizes of tracks) it is possible to use the next units and values:

• linear sizes are standard units of pointing lengths, specified in the module of CSS3 Values and Units, for example, pt, px, em, vw etc.;
• percentage – a size of track in percents from the sizes of container with a grid (although if a height or length of grid depends on content, a result will be indefinite);
• fractions are a non-negative numbers with subsequent fr unit, the size of every fraction is taken proportionally to the indicated number(see more details below);
• max-content is a keyword for pointing of maximal length from maximal lengths of the elements in a track;
• min-content is a keyword for pointing of maximal length from minimum lengths of the elements in a track;
• minmax(min, max) – sets the range of values (principle of work can be described as minmax(p, q) = max(p, min(fill – available, q))
– maximum from a lower limit and a minimum of accessible space and overhead limit);
• auto is a keyword, equivalent to minmax (min-content, max-content).

Fraction values

Let us try to understand, how fraction value works. A grid occupies some space on a width and height. It can depend on content, be strictly fixed or occupy all accessible space in an external container. Further, at description of tracks’ part of columns and rows you can obviously set, of what size they should be, for some other part you can specify that their length depends on the content.

Now, if from the accessible length taken under a grid vertically or horizontally, to subtract the sum of all such obvious or “content” lengths, the remaining space is distributed between other tracks by proportionally indicated fractions in them (size of fraction, divided to the amount of all such fractions):

On the example above it is shown by a three columns with widths in correlation 2: 1: 1 and two rows with heights in correlation 5: 2.

Example

In the rough copy of specification such complex example, allowing seeing all this chart with the different types of values at once is made:

#grid {
    display: grid;
    grid-columns: 100px 1fr max-content minmax(min-content, 1fr)
}

The following lines (tracks, they are columns in this case) are determined here:

• Starting first line.
• Line in 100px from the first.
• Another line on the distance 1/2 left after all calculations of spaces – from the second line.
• And another line, the distance of which from the third is equal to the maximal sizes of content of the elements in a column.
• Finally, the last line located on the distance from the fourth, and it is equal to either minimum length of the elements in a column or 1/2 of the remaining space.

Here is a small nuance in relation to the account of fractions that appeared inside the function of minmax: they are taken into account in the lump sum as a fractions only if they marked in maximal position. Fractions, marked in minimum position are considered equal to 0px. For more details see the specification.

===

With our next step we will try to figure out how the elements take their place between the lines of grid (inside the cells).

Binding of the elements

Now, when the elements are “bound” to the lines of the grid, there appears a question: How are they actually placed between the lines?

Binding of the elements to the borders of the cell is controlled by means of properties grid-column-align and grid-row-align. To control this it is possible to use next values:

• start
• end
• center
• stretch

I think the actions are obvious from their names, I will only notice that in every case the thing is about positioning of the element on its margin- box. The value stretch is used by default.

Binding in the columns (horizontally) corresponds to direction of the text (for example, in Arabic the start will be on the right, and the end on the left). Binding in rows (vertically) coincides with the line of blocks (by the way, it means that in some East-Asian languages, rows and columns can change their places).

Layers control

Next important moment: location of the elements inside the grid with impositions. What happens, if, for example, the two elements are bound to the same lines, or laid on at expansion on a few cells?

Foremost, it is important to understand a next nuance: the elements placed inside the grid do not influence straight on the location of each other. If you will bind ten elements to the second line horizontally and third on a vertical line, then by default they all will take their places one above the other, as though each of them is bound to the corresponding corner. The elements can influence only the sizes of tracks, if they are bound, then it will influence the sizes of content.

To control the order of displaying of such layers, the current version of specification extends possibilities of z – index, allowing managing the layers of the elements inside the grid.

Remark: in the previous version of specification the current version of IE10 is based on (platform preview 5), there was a grid-layer property which was specifically used for this purpose, not to conflict with z – index, however, further in the process of discussions in a working group this decision was reconsidered.

Example of usage:

#grid {
    display: grid;
    grid-columns: (1fr)[3];
    grid-rows: (1fr)[4];
}

#A {
    grid-column:1;
    grid-row:3;
    grid-column-span:2;
}

#B {
    grid-column:1;
    grid-row:1;
    grid-row-span:2;
    /* grid-layer: 10; */
    z-index:10;    
    margin-top:10px;
}

#C {
    grid-column:1;
    grid-row:1;
    grid-column-span:2;
    margin-left:50px;
}

#D {
    grid-column:2;
    grid-row:3;
    grid-row-span:2;
    grid-column-span:2;
    margin:10px 0 0 10px;
}

#E {
    grid-column:2;
    grid-row:2;                
    /* grid-layer: 5; */
    z-index:5; 
    margin: -20px;
}

CSS3 grid library

To begin working with grids in browsers, which do not support the module of CSS Grid Layout yet, it is possible to use js- library of eCSStender and expansion of CSS3 Grid Alignment, providing support of next properties:

• display: grid
• grid-columns & grid-rows
• grid-column & grid row
• grid-column-span & grid-row-span

See the example here.

A bit about the future, or what other possibilities are described in the module

Finally, let us slightly open the doors into the future and spy a bit, and see what possibilities are being prepared in the CSS3 Grid Layout module.

Take into account that the possibilities mentioned below are only described in the rough copy of specification, but does not yet have support among the browsers (including preliminary versions). They also can change in the future depending on the reaction of association and recommendations of working CSS group.

Pointing the ending line for attachment of the element

Optionally, for attachment of the element to the grid it is possible to specify not only starting but also ending line.

#item {
    grid-column: 2;
    grid-row: 2 4;
}

Unlike the mechanism of “span”, that specifies on how many cells the element must span horizontally or vertically, the given opportunity allows to specify clearly on what line the element must end. It is also comfortably to use this in combination with possibility of the name of separate lines of the grid.

Named Grid Lines

For the convenience the lines can be named. It is done by an insertion in the corresponding places of string values at description of tracks (it is possible to give a few names, if it has practical sense, for example, from the point of view of semantics of marking):

#grid {
    display: grid;
    grid-columns: "nav" "first" 150px "content" 1fr "last"; 
    grid-rows: "header" 50px "content" 1fr "footer" 50px; 
}

Further at description of attachment of the elements it is possible to refer to these names:

#menu {
    grid-column: "nav";
    grid-row: "content";
}

#header {
    grid-column: "content";
    grid-row: "header";
}

#article {
    grid-column: "content";
    grid-row: "content";
}

Also a specification enters 4 previously named lines – vertical and horizontal start and end, actually, framing the whole grid. This allows, for example, to locate the element “from the second column and to the last”, not thinking about the general amount of columns.

#menu {
    grid-column: 1;
    grid-row: start end;
}

#footer {
    grid-column: 2 end;
    grid-row: 3;
}

Named cells and templates

Another method of placing the elements on a grid consists in the use of templates, allowing to describe a virtual structure of blocks:

#grid {
     display: grid;
     grid-template: "ln"
                    "ma"
                    "ba"
                    "ff";

     grid-columns: auto minmax(min-content, 1fr); 
     grid-rows: auto minmax(min-content, 1fr) auto auto;
}

Thus for placing the element with binding to one or another virtual cell it is enough to refer to it with a corresponding rule:

#article {
     grid-cell: "a";
}

Such approach appears especially comfortable, if depending on different terms, for example, of screen resolution, you need to change the location of the elements and even the grid itself. In the similar situation Grid Layout is well combined with Media Queries:

@media (orientation: portrait) {
    #grid {
        display: grid;
        grid-template: "ln"
                       "ma"
                       "ba"
                       "ff";

        grid-columns: auto minmax(min-content, 1fr); 
        grid-rows: auto minmax(min-content, 1fr) auto auto;
    }
}

@media (orientation: landscape) {
    #grid {
        display: grid;
        grid-template: "ln"
                       "ma"
                       "mb"
                       "sf";

        grid-columns: auto minmax(min-content, 1fr); 
        grid-rows: auto minmax(min-content, 1fr) auto auto;
    }
}

#article {
     grid-cell: "a";
}

Pay attention, that attachment of the article to the named cell does not change here. (All of us impatient to begin to using it, however, we will wait until all this will be realized in browsers).

Conclusion

In this article I have tried to give a review of the key possibilities of the CSS3 Grid Layout module. I hope, they inspire you not less, than me.
I will remind that the module continues to develop, editors collect reviews from an external association and inside the CSS working group. In Internet Explorer 10 it is possible to take a look at the operating realization of basic functional. A few interesting examples can be found on ietestdrive.com: The Grid System and Hands On: CSS3 Grid Layout:

Also I will notice once again, that the possibilities of Grid Layout, already supported by the rendering-engine of IE10, it is also possible to use it for development of applications in style of Metro on HTML/JS for Windows 8.

To read original article in Russian click here.