We often hear (and I have sometimes said) that CSS grids are for two-dimensional layout – where we need both vertical and horizontal alignment. While it's true that grid is the only layout method with 2-axis awareness, one of my favorite grid use-cases only requires a single axis!
Last week,
I demonstrated how we can use
grid-template-areas
to
quickly describe a page layout
at different breakpoints,
or based on class variations.
But we can also use
single-axis grid areas
and named lines
to help lay out an article like this one –
with elements that break out
of the main column.
Most of our content is going to stack up in this central area, so we aren't going to worry much about 'row' alignment. But it can still be helpful to name the columns that we have, and align content to those columns.
In this case, I used line-names to create overlapping column 'areas' – a consistent margin on both sides, with a fluid spacer and then 'wide' column and main 'content' area.
By default,
everything in the article
has a grid-column: content
to keep things aligned.
But we can easily move elements around,
pulling them out to one side or both
with an extremely readable syntax.
Line names create named areas,
and vice versa!
When we put it all together,
I find grid template areas to be
one of the best features in CSS!