Making layouts in CSS used to be a tedious task and although it has become better over the last couple of years, it wasn’t until CSS Grid that developers have gotten the freedom they have so desperately wanted.
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items). — CSS Tricks
Developers have been forced to use tables, then floats, then positioning and inline block as a means to create layouts. Developers eventually got what they wanted, but it was more like they were hacking the CSS then optimally using it.
CSS grid does not only help you create a nice layout, it’s also the first time vertical centering was introduced to CSS. Vertical centering is crucial to make more intricate layouts.
How does it work?
The container element has to be defined as grid by using:
display: grid, the columns and rows get set with:
grid-template-rows. It is possible to change the order of items later, which can be very useful if you would like a different layout on mobile.
Interesting about Grid is the
minmax()CSS function defines a size range greater than or equal to min and less than or equal to max. If max < min, then max is ignored and
minmax(min,max)is treated as min. As a maximum, a
<flex>value sets the flex factor of a grid track; it is invalid as a minimum. — MDN
It is like a smarter way of using
max-width directly on columns and rows.
grid-template-columns for example can be used with fixed widths like this:
grid-template-columns: 10em 10em 10em; Meaning there will be three columns all
It is also possible to use fractions (
fr) to define how many columns there will be:
grid-template-columns: 1fr 2fr 1fr; This means that there will be three columns, the first and last column taking up one fraction and the second column taking up two fractions of the available space.
Another interesting feature of Grid is
repeat() for example:
grid-template-columns: repeat(3, 1fr); is the same as:
grid-template-columns: 1fr 1fr 1fr; its just shorter and more clear, especially when you have a lot of columns that are the same width.
min-max() in combination with
repeat() can make sure you almost need no Media Queries!
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
This means that a column has to have a width of at least 14em and a maximum width of 1fr. I also used
auto-fit here, which basically means fill out all the space available with this random number of elements I have not actually specified. It’s very useful and helps in making a Grid layout without Media Queries.
In conclusion: Grid is great, it will completely change the way we design for the web. The biggest problem now is that it is not supported by many (old) browser versions.
House, C. (2016, 4 maart). A Complete Guide to Grid. Geraadpleegd op 14 juli, 2017, van https://css-tricks.com/snippets/css/complete-guide-grid/
MDN. (2017, 8 mei). minmax(). Geraadpleegd op 14 juli, 2017, van https://developer.mozilla.org/en-US/docs/Web/CSS/minmax