Yesterday I shared a video that demonstrated how to use grid-template-areas to create a layout and on Day 9 we took a look at named lines. Today we look at an interesting feature of using either of these methods.
If you create an area on your grid using grid-template-areas you get named lines with -start and -end added to the name of the area. You can then use these lines for positioning.
So create an area called main, you get column lines to the start and end of it main-start and main-end, and also row lines named main-start and main-end.
This works in reverse too. So if you create row and column named lines that end in -start and -end you’ll get a named area of their main name. Magic!
If that sounds confusing, take a look at this video from my video tutorial series.
What is this?
I’m sharing some tips to help you learn Grid Layout from the 1st of December until Christmas. Edited highlights from the things on this site and that I’ve posted elsewhere. Follow along!
If you find this style of learning useful then you might enjoy my online CSS Layout Workshop. I’m also available for in-house training, workshops and consultancy or conference speaking.