1

I've just started playing with CSS Grid and am unclear about the limitations of the grid-template-area, and I cannot find any proper docs/guides about this.

I understand you cannot "tetris" with CSS Grid, but let's look at this simple example for a second:

grid-template-areas: "h h h h h h" "s m m m m m" "s m m m m m" "s m m m m m" "s f f f f f";

The template-columns and rows are just 1fr all the way, so nothing interesting there, and each element only has a background color. The above works fine. However, this does not:

"h h h h h h" "s m m m m m" "s m m m m m" "s m m m m m" "s f f f . f"; By "doesn't work" I mean nothing appears on the page.

It's not really tetris; I just want a blank spot in the footer. I understand I cannot do this, but can someone explain the explicit rules behind this?

Edit @Michael_B Suggested not tetris and connected rectangles, but this matrix also doesn't work:

"h h h h h h" "s m m m m m" "s m . . m m" "s m m m m m" "s f f f f f";

Edit 2 As the other answer says, named grid cells must form a single filled-in rectangle; that's the trick.

Thanks in advance

Jona
  • 1,023
  • 2
  • 15
  • 39
  • 1
    You cannot have tetris-shaped grid areas (as you noted) *and* grid areas must form a connected rectangle. – Michael Benjamin Jul 03 '18 at 01:03
  • @Michael_B please see the update - all the `m`s are still connected rectangles, and it's not tetris-shaped; I just want two gaps – Jona Jul 03 '18 at 05:40
  • 1
    @Michael_B just saw you marked this as duplicate and the other answer certainly helps - thanks! – Jona Jul 03 '18 at 05:47

0 Answers0