robohash image acting as kam's profile photo

Tip 028 - Implicit Grid Areas


This one is a kind of follow-up to the last post about naming your grid lines. In a grid-template declaration, you can shorthand grid-template-columns, grid-template-rows, and grid-template-areas by just drawing out your grid with an ASCII art approach:

.grid {
  display: grid;
    "header  header header" 50px
    "sidebar main   main"   50px
    "sidebar main   main"   50px / 1fr 1fr 1fr;

Then you can take a grid item, say grid-area: sidebar; and boom it just works. The problem is that this approach falls apart once you need grid areas that overlap each other. I present to you: implicit grid area names!

See the Pen Implicit Grid Area Names by Kam Black (@kamblack) on CodePen.

We're not using grid-template like we are above - instead we're just extending the capability of the line naming from the last tip. You can name your lines whatever you like. But it you end the line name with -start or -end, you're implicitly declaring a new grid area. In the CodePen example, I didn't declare the grid areas photo1, photo2, or blue - but I did name some lines in the grid after those areas and the browser picked up on it. For the full area to be there, you need a start and end in each of the columns and the rows, making a whole rectangular area. That name is now available to use in your grid-area rules. (Sadly, Firefox's grid inspector won't display the grid area names if they're made implicitly... yet) Great example of this is used to make a scrapbook layout.

Go forth and name things, friends!


Have you written a reply on another site? Put the URL here: