Create a range of grid items for the last row / column

Question

Is it possible to make a range of grid elements from the first to the last row, when I do not know the number of rows?

Let's say I have the following html with an unknown number of boxes.

How can I make the third .box segment 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

You can add grid-row-start to these css windows and set it to cover an absurdly large 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 seem to work in some browsers (Chrome), other browsers (Firefox) will create an absurd number of lines that will cause problems.

Answer 2

Is it possible to make a range of grid elements from the first to the last row, when I do not know the number of rows?

This feature seems to be missing from CSS Grid Module Level 1 . So the answer will be no, this is currently not possible.

---

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

Use negative integers.

Here are two interesting sections in the CSS Grid specification:

7.1. Explicit grid

Numeric indices in grid placement properties are calculated at the edges of the explicit grid. Positive indices are counted from the beginning, while negative indices are counted from the end.

and here...

8.3. grid-row-start based layout: grid-row-start , grid-column-start , grid-row-end and grid-column-end properties

If a negative integer is specified, it is instead counted in reverse order, starting from the extreme edge of the explicit grid.

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

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

... you can make the grid area cover all columns by setting this rule:

 grid-column: 3 / -1; 

This indicates that the grid area will span from the third row of the column to the last row of the column.

The converse will be:

 grid-column: 1 / -3; 

Again, this method only works on explicit grids.