tips

Tip 030 - Named Grid Lines Cont'd

Having just finished writing about how naming your lines in CSS grids helps, it figures that someone far smarter than I goes and publishes a full write-up that goes over this topic in depth - and in far simpler terms as well. As Rachel Andrew describes in her post on Smashing Magazine, naming your lines actually has extra benefits when a design uses subgrid, a coming-soon spec that will be (almost) as revolutionary as CSS Grid itself was.

https://www.smashingmagazine.com/2019/10/editorial-design-patterns-css-grid-subgrid-naming/

Some background: Subgrid is part of the CSS Grid Level 2 spec. Imagine you have a basic grid, you define some columns and some grid items. Now, one of your grid items has more children that you want to line up along the "main" grid. With subgrid, you can make that child display: grid and instead of defining your grid template the normal way, you can say grid-template-columns: subgrid and now you can position that grid's children according to the inherited "parent's" grid lines. Super cool stuff.

But another neat thing, as Rachel explains, is that if you name your lines in the parent grid, you can still use those names in your subgrid - as if nothing changed! Another potential win for named areas, custom properties, and all that neat CSS magic.

 

Have you written a reply to this post? Send me the URL here: