Make a grid item span to the last row / column in implicit grid

Question

Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?

Let’s say I have the following HTML content with an unknown number of boxes.

How can I make the third .box span from the first grid-line to the last?

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 1

Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?

A natural Grid solution to this problem appears to be missing in the current spec (Level 1). So the answer would be "no", strictly with Grid properties.

However, as pointed out in this answer, it may be possible with absolute positioning.

---

While CSS Grid cannot make a grid area span all columns / rows in an implicit grid, it can do the job in an explicit grid.

Use negative integers.

Here are two interesting sections in the CSS Grid specification:

7.1. The Explicit Grid

Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side, while negative indexes count from the end side.

and here...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

In other words, when dealing with an explicit grid, which is a grid that you define using these properties:

• grid-template-rows
• grid-template-columns
• grid-template-areas

... you can make a grid area span all columns by setting this rule:

grid-column: 3 / -1;

That tells the grid area to span from the third column line to the last column line.

The reverse would be:

grid-column: 1 / -3;

Again, this method works only in explicit grids.

Answer 2

You can add grid-row-start to that box's CSS content, and set it to span an absurdly high number.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

This is a non-optimal solution and does not work in every browser, so be careful! Although this may appear to work in some browsers (Chrome), other browsers (Firefox) will create the absurd number of rows which causes problems.

Answer 3

A solution that actually worked for me was to set position: absolute; on the element you wanted to grow to the end. This will have its drawbacks, but it could be a lifesaver in some cases. Here is a full example:

.grid {
  display: grid;
  grid-template: auto / auto 22px auto;
  position: relative;
}

.vline {
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: black;
  grid-column: 2 / span 1;
  margin: 0 10px;
}

.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }
.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }
.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }
.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }
.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }
.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }
p, h1 { margin: 0; padding: 0; }

<div class="grid">
  <h1>1.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>2.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1>3.</h1>
  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>4.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <div class="vline"></div>
</div>

Answer 4

So if it doesn't seem possible yet, you might opt for changing the structure and nest the grid.

Use JavaScript to take out the third box and place it besides your original grid container, if you're unable to do that in advance.

.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

.box {
    background-color: blue;
    padding-bottom: 20px;
    border: 1px solid red;
}

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}

<div class="container">
    <div class="nested_grid">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>

Answer 5

For those here in 2022:

The OP states they are using an implicit grid in the question title but in their code example they are defining their grid with: grid-template-columns and grid-template-rows which are defined as explicit grid properties by w3.org.

That being said, here is a solution for spanning n number of rows.

(Or columns if desired, simply replace rows with columns as necessary)

As mentioned above you are able to simply set grid-column-end: -1 on the grid item to achieve full column spanning. Earlier answers made this a little convoluted and possibly over complicated in their examples.

Grid item that you want to span all rows:

#item {
  grid-row-start: 1;
  grid-row-end: -1;
}

Here's a working code snippet:

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: row dense;
}


#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

/* Here’s the magic: */
#item4 {
  grid-row-start: 1;
  grid-row-end: -1;
  background-color: red;
}

#item5 {
  background-color: aqua;
}

<div id="grid">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4 (full span)</div>
  <div id="item5">5</div>
</div>