Search code examples
htmlcsscss-grid

CSS grid - Overlapping grid line numbers

Apologies if this question has already been asked but I haven't been able to find any posts that address this.

My grid has three items: red, green and blue. (See JSFiddle)

Red has a row-start property via grid-area: 6 so it is given priority and placed first. Blue and green are then placed into the grid in their source order. The result looks like this:

![![enter image description here

I don't understand this result because it looks as though red has been placed on row 2 despite specifying a row-start of 6 (via grid-area: 6;). If you inspect the grid in Firefox devtools, you see that the grid line numbers for rows 2-6 overlap:

![![enter image description here

According to MDN, specifying an integer value for grid-area

contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a , only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

The last sentence doesn't make sense to me - I'm reading it as "since not enough lines with the name '6' exist, all implicit grid lines from 3-6 are assumed to have that name for the purpose of finding this position". Shouldn't the algorithm create rows 3-6 implicitly and then place the red div on row six 6 with whitespace for rows 2-5?

This is the result I was expecting:

enter image description here

I obtained this by setting grid-template-rows: repeat(6, 100px);. (But grid-template-rows: repeat(6, 1fr); didn't work, not exactly sure why.)

Solution

  • Your rows are sizeless, therefore row 6 overlaps rows 2,3,4,5.

    #grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, 100px);
}


#red {
  grid-area: 6;
  background-color: red;
}

#green {
  background-color: lightgreen;
}

#blue {
  background-color: blue;
}

div {
  height: 100px;
  width: 100px;
}
    <div id='grid'>
  <div id='red'></div>
  <div id='green'></div>
  <div id='blue'></div>
 </div>