After many changes and improvements to CSS (Cascading Style Sheets), the latest new arrival is CSS Grid Layout. A major change after Flexbox, intended to make page layout easier for developers.
In this article, we are going to explain what CSS Grid is and why it is used, while comparing it with Flexbox, in order to help you with that choice: “Grid or Flexbox?”
You will find a few tips and pieces of advice here to make your life easier!
What is CSS Grid Layout?
CSS Grid Layout is a CSS-specific module that makes it possible to create more complex layouts (based on the principle of dividing up space). Indeed, it allows two-dimensional layout, meaning that it takes both rows and columns into account in order to position elements in different places.
A method modelled on the same way tables work, CSS Grid therefore uses columns and rows. However, its structure is not fixed, which allows it to produce more varied layouts.
An example of what you can achieve with CSS Grid:
The advantage of CSS Grid is that it can be used either for an entire layout or to manage part of a layout.
Notes on the units of measurement used for CSS Grid Layout
Several units of measurement can be applied with CSS Grid.
The unit of measurement for fixed elements
The pixel (px) is the most widely used unit of measurement for everything relating to the sizes of elements intended to remain fixed.
Units of measurement for variable-size elements
For so-called variable sizes (which are intended to adapt as the screen size is reduced so as to give an identical visual result), several options can be used:
- The percentage (%) adapts proportionally to its parent element
- The Viewport Height (vh) is a unit that adapts proportionally to the height of the screen
- The Viewport Width (vw) adapts proportionally to the width of the screen
- The em is used for everything text-related. The font size in this unit of measurement adapts to the size of the parent element containing it
However, for CSS Grid, it is advisable to use the unit known as the fraction (fr), developed exclusively for this module. It adapts to the available space without taking fixed elements into account.
Example of the fr unit in use
What is Flexbox?
Flexbox is a CSS-specific property, but unlike CSS Grid it allows a one-dimensional layout instead. That is to say, it does not manage rows and columns at the same time, but only one direction at a time (we will come back to this notion a little further on in the article).
An example of what you can achieve with Flexbox
An important place for content
The advantage of Flexbox is that it automatically adapts to all screen sizes via the flex-wrap: wrap property. The arrangement of elements will remain fluid and adaptive. So, if the screen size decreases, the elements adapt automatically by wrapping onto a new line, for example.
The purpose of Flexbox is to let the content decide how much space it takes up and how it will be arranged, so as to always fill as much of the available on-screen space as possible.
Using the same layout as in the example above, here is what you can obtain with Flexbox on a smaller screen
CSS Grid Layout vs Flexbox
CSS Grid and Flexbox are not used in the same way, which is logical since they are not used to meet the same objectives. Here are a few examples.
One-dimensional or two-dimensional
Flexbox is one-dimensional in the sense that the elements laid out can only be positioned by row or by column. Flexbox does not make it possible to manage both directions (vertical: cross axis, and horizontal: main axis) simultaneously.
Indeed, the properties that allow elements to be arranged using Flexbox are: flex-direction: row to get a row and flex-direction: column to get a column.
Example of the directions possible with Flexbox
CSS Grid is two-dimensional in the sense that elements can be placed on a row and on a column. The layout works on two axes. This makes it possible to place elements in the chosen rows and columns, wherever they may be.
Example of the directions possible with CSS Grid Layout
Overlapping elements
The only way for Flexbox to make two elements overlap is to use negative margins. This is not a highly recommended method, especially when you can use CSS Grid, which is far better at doing this.
Example of overlapping with Flexbox
Overlapping with CSS Grid is managed much more easily thanks to the positioning of elements on two axes. As mentioned earlier in this article, CSS Grid should be pictured as a table with rows and columns into which the elements are inserted. All you have to do, then, is ask the block to position itself on a vertical cell and a horizontal cell of the table, for example. That way, it becomes easier to overlap the various elements with one another.
Take the box entitled “Text block 1”. Here, we ask this block to position itself across 3 horizontal cells and 4 vertical cells. Then we ask the block entitled “Text block 2” to position itself on the second cell of the table and to take up one cell in length and one cell in width. And there you go — nothing more complicated than that to superimpose several elements using CSS Grid!
Example of overlapping with CSS Grid. Here, we have added a grid to illustrate the point about tables and cells
So which one should you use?
CSS Grid vs Flexbox: whatever your problem, Grid is not intended to replace Flexbox. In fact, the two can be complementary and you can perfectly well combine these two modules in the same project. Do not limit yourself to one solution and make the most of the advantages of each; it will make your development and all your positioning easier!
Be careful on one point: you can use Flexbox inside CSS Grid, but not the other way round!
CSS Grid is still in its early days. We talk about level 1, but changes may well arrive soon! A level 2 with the notion of subgrid can already be tested in Firefox Nightly.
If you enjoyed this article, do head over to our blog to browse the Front-End section.
