51

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>
Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
jbe
  • 1,552
  • 1
  • 11
  • 20

4 Answers4

30

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.

Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
  • 1
    i do not understand the explicit/implicit part... please explain what that means – jbe May 18 '17 at 21:10
  • 4
    The *explicit* grid are the rows and columns you define using the `grid-template-*` properties on the container. The *implicit* grid are the rows and columns automatically generated by the container to accommodate grid items that are positioned outside of the explicit grid. – Michael Benjamin May 18 '17 at 21:21
  • 1
    negative integers for grid-row do not work for me either in any browser. – Ben Jun 28 '17 at 21:25
  • This answer is not valid. You would have to know the amount of rows to explicitly define in order for -1 to work. The original questions is about implicit rows as well. – Jason T Featheringham Jul 30 '17 at 11:04
  • @JasonTFeatheringham, your point is already covered in my answer. Not sure how you missed that section. It's right at the top. – Michael Benjamin Jul 30 '17 at 11:38
  • 1
    The key word here is explicit grid. This trick won't work in implicit grid. Writing here again to remind myself and anyone reading this. – John Winston Sep 11 '20 at 02:39
25

You can add grid-row-start to that boxes css, 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>

Edit - Disclaimer:

This is a non-optimal solution and does not work in every browser, 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.

Hodrobond
  • 1,645
  • 15
  • 17
  • 2
    imo chomes handles this correct while firefox does not. makes no sense to create those rows if there is no content.... sadly there is no "magic" name for the last row (like `:last-child`) – jbe May 18 '17 at 21:02
  • IMO doing what you asked (as FF does) is the correct behavior, even if it messes up the hack. If I had some use for two columns via css, I don't want the Chrome to not create them because the columns are empty. Of course, CSS-grid should be fixed to allow this without a hack. – SamGoody Sep 11 '18 at 20:13
  • 1
    Seems like Firefox no longer creates the absurd number of rows (or at least columns, which was my need/test). At least, it doesn't report them in its grid debugger. – Victoria Oct 24 '18 at 21:06
  • How could you achieve this so the first item of the grid expands as a full height column at the begining of the grid? Like this https://i.imgur.com/UgdYrYx.png – George Nov 12 '18 at 15:15
  • 1
    @George, might be wrong as I did a quick 60 second hack but, update the selector from `nth-child` to `first-child`, and update `grid-column` to `1`? – Hodrobond Nov 14 '18 at 00:56
  • I know it's a hack, but in practical terms, what problems are caused by "the absurd number of rows"? I see them in Firefox grid debugger, but in my case they don't seem to cause any layout issues. Shall I worry about performance or something else? – Tad Lispy Apr 15 '22 at 06:09
5

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>
FanManPro
  • 976
  • 1
  • 13
  • 27
3

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>
Duck
  • 66
  • 4