CODEWITHSUNDEEP
htmlcsscss-grid
freshyill
freshyill

Reputation: 393

Make column span all rows (including implicit) in CSS Grid

I'm trying to make a grid column span every row, including implicit rows.

I came across this question asking how to span all grid rows. The second answer has a correction stating a better solution. This seems like it would work, but my own example, and the comments on the second answer, indicate that it doesn't work.

The W3 spec gives this a very close example as well.

Is there something wrong with my code, or is this possibly a bug in Firefox, Chrome, and Safari?

I also have this example in a CodePen here.

* {
  box-sizing: border-box;
}

.container {
  border: 1px solid #666;
  max-width: 1000px;
  padding: 10px;
  display: grid;
  grid-template-columns: 150px 1fr 300px;
  /* grid-template-rows: repeat(auto) [rows-end]; Doesn't seem to help */
  /* grid-template-rows: [rows-start] repeat(auto) [rows-end]; Doesn't seem to help */
  grid-template-rows: repeat(auto);
  grid-gap: 10px;
  margin: 10px auto;
  grid-auto-flow: row dense;
  /*   justify-items: stretch; */
  /*   align-items: stretch; */
}

.container>* {
  grid-column: 2 / 3;
  padding: 10px;
  outline: 1px solid #666;
}

.pop {
  grid-column: 1 / 2;
  /* grid-column: 1 / -1; If I switch to this, this div will span the full width of the grid, which is exactly what I'm trying to do with rows*/
}

.tertiary {
  grid-column: 1 / 2;
}

.secondary {
  grid-column: 3 / 3;
  grid-row: 1 / -1;
  /* Doesn't work */
  /* grid-row: rows-start / rows-end; Doesn't work */
  /* grid-row: 1 / rows-end; Also doesn't work */
  /* grid-row: 1 / span 7; This works, but I need to span an unknown number of rows*/
  /* grid-row: 1 / span 99; This is gross and creates 99 rows */
}
<div class="container">
  <div class="secondary">Secondary - why doesn't this span all the way to the bottom of the grid?</div>
  <div class="tertiary">Tertiary</div>
  <div class="tertiary">Tertiary</div>
  <div class="tertiary">Tertiary</div>
  <div>Primary</div>
  <div>Primary</div>
  <div>Primary</div>
  <div class="pop">Span tertiary and primary</div>
  <div>Primary</div>
  <div class="tertiary">Tertiary</div>
  <div>Primary</div>
  <div>Primary</div>
</div>

Upvotes: 7

Views: 5129

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371203

There are two obstacles in your way.

First, this line of CSS code in your .container rule:

grid-template-rows: repeat(auto);

This code is invalid. The argument in the repeat() notation must begin with a positive integer, which specifies the number of repetitions. You don't have that, so the code doesn't work. More details in the spec.

Second, even if the code above was correct, let's say:

grid-auto-rows: auto; (which happens to be the default setting anyway)

Your column would still not span all rows.

This is because, as you may have seen in the other answer you cited, a track definition can be set to cover all perpendicular tracks only in the explicit grid.

So this would work:

grid-template-rows: repeat(6, auto);

revised demo

The rest of the problem is covered in detail in the other answer you cited.

Upvotes: 5

Related Questions