Front-end developers definitely know of the problems concerning layout design when using floats, clearfixes, inline-block elements, or relative/absolute positioning. Unfortunately, many of them still use these methods even today – not because they’re crazy about working in such a hacky way, but because they’re forced to in order to retain support for old browsers.
Recently, we began to use flexbox, and finally the world made some sense again. Flexbox is excellent, but it does have one small problem. Flexbox is designed as a one-dimensional model – that is, as a way to arrange elements in rows or columns.
The resulting space where the complete layout is placed in the broader picture is filled by a CSS grid. A CSS grid is a two-dimensionally based grid system layout design. So is there still a need for flexbox? Absolutely, because combining CSS grid with flexbox is the future of web interface design, in which the grid would be used for the general definition of the layout, while flexbox would be used in the design of individual UI elements.
Grid container – any HTML element that serves as a "container", that is, the element that is used for grid structure (in css: display: grid)
Grid item - a direct descendent of the grid container (only the one on the first level), which automatically becomes a grid item.
Grid lines – the horizontal (rows) or vertical (columns) lines that divide the grid into sections. These lines are numbered by default, beginning and ending with the external borders of the grid.
Grid cell – a cell within a grid.
Grid area – the rectangular area between a specified number of grid lines (in the case of the diagram – between 4 grid lines). A grid area can encompass one or more cells.
Grid track – the space between two neighboring grid lines. We can observe them horizontally as rows (as in the picture) or vertically as columns.
Grid gap – the empty space between grid tracks; most people refer to them as “gutters” – from popular frameworks like Bootstrap.
Let’s write some code
I’m a big fan of learning new things by way of examples, in order to illustrate these conceptual terms (or at least some of them), I will put them into a real context by means of example.
In this simple example, I would like to put together a structure that can be seen fairly frequently on today's web. We will use a CSS grid for general definition (i.e., the red elements in the diagram) and flexbox for the blue elements.
Code and illustration are available at the link below:
The procedure for creating a grid layout is quite simple:
1. We define the element within which we will arrange the grid structure (in this case, div.container)
2. We define the elements within the grid (in our case, div.box)
3. That’s all folks! There is no number three :-)
In this example, we used slightly unusual syntax in CSS that requires additional explanation up front:
- grid template columns: 1fr 1fr 1fr – defined number and width of columns (3 columns – 1fr 1fr 1fr), while each column has a width of 1fr (this is a new unit in CSS, meaning "fraction"). The diagram below explains how the fractions work.
- An additional class, .last-row, has been placed on the final .box element so that the final element will be widened to the full (100%) width of the grid. In order to get this result, grid-column: 1 / 4 is used; In other words, this element is widened from the beginning to the end of the grid (3 col grid has 4 grid lines all together). The numbers refer to grid lines: the first number is the first grid line, while the second number is the final grid line – grid-column: <start-line> / <end-line> ). See the example in the picture below:
The browser support of CSS grid:
- IE 11
- Firefox 52 +
- Chrome 58 +
- Safari 10.1
- Opera 46 +
- iOA Safari 10.3 +
- Android browser 56 +
- Chrome za Android 59 +
For more information - https://caniuse.com/#feat=css-grid
In this simple example showing only a small part of a CSS grid, we can see its great importance for front-end developers; all of these methods can already be put into use today. Of course, there will always be the problem of browser support, which is the main obstacle to mass use.