76

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>

Improve this question
1
  • 22
    It's really stupid that this basic requirement can't be achieved in a brand new feature of CSS. Commented Aug 11, 2017 at 8:10

6 Answers 6

Reset to default
41

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

i do not understand the explicit/implicit part... please explain what that means
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.
negative integers for grid-row do not work for me either in any browser.
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.
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.
|
29

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.

Improve this answer

7 Comments

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)
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.
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.
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 i.imgur.com/UgdYrYx.png
@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?
|
7

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>

Improve this answer

Comments

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>

Improve this answer

Comments

0

this answer is for the duplicate that also doesn't define the numbers of rows.

Span until the last line in auto-flow grid

You may also preset the numbers of rows according to the number of children it holds using the :nth-last-child(n) selector and :has()

Nowdays that works for this simple grid .

body div.container { display: grid; grid-auto-flow: row dense; width: 250px; --gap: 2px; gap: var(--gap); margin: var(--gap); padding: var(--gap); background: yellow; counter-reset: divs 0; } .container > div:not(.side):after { counter-increment: divs; content: counter(divs); } div { border: solid; grid-row: auto; grid-column: 1; background: white; } .side { grid-column: 2; grid-row: -1 / var(--span); order: 1; background: blue; } /* if you use a css preprocessor, do a loop */ .container:has(:nth-last-child(2)) { --span: 2; } .container:has(:nth-last-child(3)) { --span: 3; } .container:has(:nth-last-child(4)) { --span: 4; } .container:has(:nth-last-child(5)) { --span: 5; } .container:has(:nth-last-child(6)) { --span: 6; } .container:has(:nth-last-child(7)) { --span: 7; } .container:has(:nth-last-child(8)) { --span: 8; } .container:has(:nth-last-child(9)) { --span: 9; } .container:has(:nth-last-child(10)) { --span: 10; } /* demo */ body { display: flex; flex-wrap:wrap; gap:2em; margin:2em; justify-content:center; }
<div class="container"> <div class="side"></div> <div>Row </div> </div> <div class="container"> <div class="side"></div> <div>Row </div> <div>Row </div> </div> <div class="container"> <div class="side"></div> <div>Row </div> <div>Row </div> <div>Row </div> </div> <div class="container"> <div class="side"></div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> </div> <div class="container"> <div class="side"></div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> </div> <div class="container"> <div class="side"></div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> </div> <div class="container"> <div class="side"></div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> </div> <div class="container"> <div class="side"></div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <div>Row </div> <p style="margin:0;background:red;color:white;text-align:center">All preset selectors used </div>

If you use a CSS preprocessor (i don't) , doing a loop make it easier to write example with SCSS if you may have up to 24 rows

@for $i from 2 through 25 { .container:has(:nth-last-child(#{$i})) { --span: #{$i}; } }

Finally & out of the scope of the question, javascript can easily find the number of children and rows to span to update a css rule

Improve this answer

Comments

-2

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>

Improve this answer

1 Comment

This doesn't answer the question. Your template explicitly states the number of rows and columns, while OP says that the number of rows is not known.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.