CSS grid layout is a revolution in creating CSS-based layouts. In the past, you had to trick to design layouts – now it’s finally intuitive. At the same time, the grid layout is extremely powerful. And the good: grid layout is supported in the current versions of all major browsers.
Even in 2018, most web layouts will still be implemented with techniques that were originally not intended for layouts and are only partially suitable for them. These include, for example, float, display: inline-block, display: table-cell and Co. Individual components of CSS3 such as rounded corners, shadows, gradients or transitions have long made it in web layouts and in our workflow, but in terms of layout we are in the not much further in the last ten years. Fortunately, that changes – on the one hand through Flexbox, which is being adapted further, and more recently through CSS Grid (officially: “CSS Grid Layout Module Level 1”).
CSS Grid is a W3C specification for creating layouts.
Since May 2017 CSS Grid is a “Candidate Recommendation”. H. only one step away from final adoption. CSS Grid does exactly what its name implies: creating and defining grids for web pages. You can define both simple two- or three-column grids as well as sophisticated 16-column grids. The appearance and the number of lines can also be defined; however, you can also rely on the implicit grid, which automatically creates the required lines. In addition, distances between the grid cells can be defined and the HTML elements distributed arbitrarily on the grid. Individual elements can extend over several columns or rows; However, grid cells can also remain free, enabling completely new layout types.
Also in terms of alignment CSS Grid offers everything your heart desires: With a handful of properties, you can align your elements as desired vertically and horizontally. The dimensions of the grid can be determined very flexibly, d. H. For example, combine columns in fixed width with flexible columns, which optimally divide the remaining space among themselves. In addition, with the minmax () function, extent definitions are possible, such as “at least 200 px, but no more than 50%”. CSS Grid gives you many raster definition options that are as flexible as needed for today’s websites. You can also use very intuitive techniques. And of course you can define different rasters for different viewports.
CSS Grid Vs. Flexbox
Those who speak of CSS3 layouts usually also mean Flexbox today. What exactly is the difference between Flexbox and CSS Grid? What does CSS Grid do, which is not possible with Flexbox? The main difference between CSS Grid and Flexbox is, as already mentioned, that Flexbox is suitable for one-dimensional arrangements, whereas CSS Grid is suitable for multidimensional ones. You can see that clearly in the last example: In this form you would not have been able to implement it with Flexbox. We could have realized every single layout with interleaves with Flexbox; but there is no way to implement these different arrangements from one and the same source code.
Another difference between CSS Grid and Flexbox is how to handle white space. With the grid that you define, you can also leave individual areas blank. In classical CSS, you have to use the bulky margin for white space or trick it with empty elements. In addition, the Flexbox arrangement has a different approach than the Grid Layout arrangement. With grid layout you start from the grid, it forms the basis for the orders. With Flexbox, on the other hand, you start with the elements, which then magically arrange themselves. Rachel Andrew speaks of “working from grid definition” (Grid) as opposed to “working from content out” (Flexbox). Flexbox has its strengths, for example, when you want to quickly arrange elements next to each other or among each other. That’s why Flexbox is the tool of choice for a navigation menu – CSS Grid for more complex layouts.
For a complete tutorial you can visit learncssgrid.com