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

user_4375843 0
Viewed 44601

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?

Lets say I have the following html 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>

css-grid css html
5 Answers

A solution that actually worked for me to set position: absolute; on the element you want to grow to the end. This will have its drawbacks but could be a life saver 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>

user_42145820

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>

user_57936180

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;
}

/* Heres 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>

user_144650330
Related