This specification is a great read, even for those not familiar with reading CSS specs. It first introduces all the concepts with comprehensible examples, and then dives into the syntax in more detail (including diagrams that show exactly which properties can be used how, available shorthand syntaxes and the algorithms used to decide about sizing and alignment).
The grid spec introduces a number of new terms. A grid is a set of lines that divides the grid container . Within the grid container, columns or rows exist between the lines. Columns and rows can both be referred to as grid tracks . On the grid, each cell is called a grid cell . One or more cells can form a grid area , which can be occupied by grid items .
I found it a bit confusing at first to see the difference between grid areas and grid items, but as I understand it, grid items are the bits of content that authors can specify to live in a specific grid area .
More alignment options
Some of the best new CSS properties that were introduced in flexbox, also work on grid containers (
align-items ), grid items: (
align-self ) and the grid itself (
fr unit can be used to define flexible lengths and represents a fraction of the free space in the grid container.
Changing visual order
The grid spec frequently talks about the
order keyword, which lets you visually change the order of your document (this property also exists in flexbox).
This makes that there are now two different orders to keep in mind:
- document order / source order (this is what you see when you view source)
- order-modified document order (this is the document order with all the ‘order’ properties in your stylesheet(s) taken into account)
Browsers are supposed to paint in the order-modified document order (this is also good to know for if you’re setting
The spec emphasises that
order will only change your visual order, and not update speech order (for people that have your page read out to them) or navigation order (for people that use keyboards to navigate). Therefore it is important that the source order is sensible (this is an important accessibility concern).
Lots of things within grids can happen automatically. This is a bit complex to get your head around, but it is rather exciting (if you have not seen it, I can recommend fantasai’s CSS Day talk on defining auto ). The good news is: to use grids, you do not need to know how the auto algorithms work, they just do.
With grid properties, you can set your grid exactly how you want it to be (‘explicit grid’). If you forget something or position an element outside of the bounds of your grid, the grid algorithm will create ‘implicit’ grid tracks.
Grids in grids
Grid items can be grids themselves (they are then ‘subgrids’), but this is still being discussed by the CSS Working Group. With
display: subgrid , the subgrid would be able to inherit the cols/rows of its parent.
I really like the Grid Layout specification and I am looking forward to use it in my daily work. I do think the transition to actually using the new properties for page layout will come with some problems, especially around giving grid areas names that can be shared across everyone working on the same site, and letting grid areas be occupied by components (as component libraries are the deliverable of many front-end developers these days). Probably something to address in a separate blog post.