There should be a CSS grid | Perpetuum Mobile

There should be a CSS grid

Zvonimir Dimovski Technology, CSS Grid
There should be a CSS grid

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.

With the ever-growing need to use interfaces that must be responsive (as well as adaptable to both desktop and mobile devices), the design process becomes additionally complicated. Quite often, the elements on a web page could not be linearly arranged at each of the necessary sizes (viewports), so that various JavaScript fixes were done in order for the structure of the HTML elements to be changed and specially adapted for every viewport.

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.

Terminology

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 container

Grid item - a direct descendent of the grid container (only the one on the first level), which automatically becomes a grid item.

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 line

Grid cell – a cell within a grid.

grid cell

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 area

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 track

Grid gap – the empty space between grid tracks; most people refer to them as “gutters” – from popular frameworks like Bootstrap.

grid gap

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.

grid web

Code and illustration are available at the link below:
https://codepen.io/zvonch/pen/NvezVp

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.

ff fraction unit

- 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:

grid web linije

 

The browser support of CSS grid:

  • IE 11
  • Edge
  • 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.

meme