1

I am trying to create a css grid with 3 columns and N rows. The first two rows should have a sidebar in the rightmost column, but when I do this, I get an "Invalid property value" message from the inspector. Any ideas why? Here is my css:

.thumbnails {
  display: grid;
  grid-template-areas: 
    "thumbnail thumbnail sidebar" 
    "thumbnail thumbnail sidebar" 
    "thumbnail thumbnail thumbnail";
}

.thumbnail {
  grid-area: thumbnail;
}

.sidebar {
  grid-area: sidebar;
}
<div class="thumbnails">
  <div class="sidebar">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
  <div class="thumbnail">
  </div>
</div>
connexo
  • 53,704
  • 14
  • 91
  • 128
kloddant
  • 1,026
  • 12
  • 19

1 Answers1

4

Grid-Areas must be rectangular so your prospective layout will not compute as it is "L"-shaped. 

.thumbnails {
     display: grid;
     grid-template-areas:
        "thumbnail thumbnail sidebar"
        "thumbnail thumbnail sidebar"
        "thumbnail thumbnail thumbnail";

    }

From your description:

The first two rows should have a sidebar in the rightmost column

you would require

.thumbnails {
     display: grid;
     grid-template-areas:
        "thumbnail thumbnail sidebar"
        "thumbnail thumbnail sidebar"
        "thumbnail thumbnail .";

    }
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Great answer. What does the `.` do? – connexo Oct 07 '19 at 13:55
  • " a period signifies an empty grid cell" - https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas – Paulie_D Oct 07 '19 at 13:57
  • Oh, thanks! How do I specify that the cells below the sidebar should not contain sidebar elements though? Because I would imagine that the . would also match elements with grid-area: sidebar, no? – kloddant Oct 07 '19 at 13:58
  • If the . represents an empty grid cell, that won't work, because there need to be thumbnails beneath the sidebar. – kloddant Oct 07 '19 at 13:59
  • You can't do that...as I said, grid-area must be rectangular. It sounds as though you want something more akin to *floated* sidebar and that's not possible with CSS-Grid. – Paulie_D Oct 07 '19 at 14:02
  • 1
    Huh, that is disappointing. I thought the whole point of css grid was to be able to do easily weird layouts like this. Oh, well. Thank you for the explanation! – kloddant Oct 07 '19 at 14:04
  • @Paulie_D Certainly that's possible with CSS grid, it just cannot be done using template areas. – connexo Oct 07 '19 at 15:32
  • I didn't say it couldn't be done, I just answered the question. – Paulie_D Oct 07 '19 at 22:02