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
-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-end, and also row lines named
This works in reverse too. So if you create row and column named lines that end in
-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.