Items that span all columns/rows using CSS grid layout

Question

With the CSS Grid Layout Module soon shipping in Firefox and Chrome, I thought that I'd try to get a handle of how to use it.

I've tried to create a simple grid with one item a spanning the left side of all of the rows, with the other items (b, c, d, e, etc.) spanning the right side of individual rows. The amount of items spanning the right side of the rows is variable, so there might be any combination of b, c, d, e, etc., so I'm using the grid-auto-rows property. As such, I cannot define a fixed number of rows for a to span, but I would like a to span all available rows.

#container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-template-columns: [left] 4rem [right] 1fr;
    margin: 0rem auto;
    max-width: 32rem;
}
#a {
    background: lightgreen;
    grid-column: left;
    grid-row: 1 / auto;
    justify-self: center;
}
#b {
    grid-area: auto / right;
    background: yellow;
}
#c {
    grid-area: auto / right;
    background: pink;
}
#d {
    grid-area: auto / right;
    background: lightskyblue;
}
#e {
    background: plum;
    grid-area: auto / right;
}

<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
</div>

What should I do to make a span all rows without knowing how many rows there will end up being?

I'm digging into CSS Grid also and I'm having the exact same problem. I feel like there's something easy I'm missing. — Miles, Jun 07 '17 at 17:01
I'll write this up as a full answer when I have a sec, but the key is a grid inside of a grid. So make another div next to 'a' that holds b, c, d, e and all the rest - let's call it 'content_holder'. Then add display: grid; to 'content_holder'. It will auto size to the content and 'a' will auto-size to it. — Miles, Jun 07 '17 at 20:22
I'm having the same issue. Supossedly grid-row: 1 / -1 should do it, but it doesn't work with auto rows apparently :( — brohr, Oct 27 '17 at 20:21

score 211 · Answer 1 · edited Feb 18 '21 at 11:23

211

I had the same situation and found a clean solution.

Instead of using a huge row span value, try:

grid-column: 1/-1;

As negative number counts from the right, this code specifies the grid-column to the end of the last column.

Note: In case this doesn't apply, check Jonny Green's solution in the below comment.

edited Feb 18 '21 at 11:23

m7913d

10,244
7
28
56

answered May 30 '18 at 20:09

lehoang

3,577
1
15
16

Beautiful solution, worked for me in the case that I had 1 cell which I wanted to span the full width and a bunch of other cells which I wanted to be 1 cell width. Defining `grid-column: 1 / span X` was breaking the responsiveness for me and this fixed it. – Protozoid Jan 21 '19 at 16:02
16

Unfortunately, this doesn't work when the number of columns is dynamic and unknown. Where the number of columns is not known, the solution I've found is `position: absolute;` and `width: 100%;` on the element to span all columns, and add `position: relative;` to the parent. – Jonny Green Jul 29 '19 at 15:49
After a few days fighting with css, Jonny Green comment is what finally got it working (with the addition of `height: 100%;` on the element to span). – pmiguelpinto90 Sep 09 '19 at 08:18
Just tried using Jonny Green idea on a layout, but realized it didn't work for me — SOMETIMES the content in #a might be taller than all the other content. In that case, position:absolute is not helping... – Jeremy Carlson Feb 05 '21 at 17:41
1

Though it's a hack, I was able to get away with `grid-row: 1 / span 99; height: 100%;`, knowing I'd never have anything even close to 99 rows (do 999 if you need to). I needed the element to still occupy space, which is why @JonnyGreen's solution didn't work for my needs. – Tomas Mulder Nov 17 '21 at 22:22
This solution will only work in situations where there is an "explicit grid". [It will not work with implicit grids](https://stackoverflow.com/a/49076465/923560). – Abdull Dec 07 '21 at 06:52

G-Cyrillus · Answer 2 · 2021-08-30T19:14:31.617

13

edit: do not mind this answer unless you are about an obsolete browser ;)

You might use a hudge value of row to span (at least as much you believe maximum of rows could be) :

grid-row: 1 / -1; 12/19 , still not working in FF.

Edit grid-row: 1 / -1; is now avalaible in latest Firefox too. spanning a hudge value is not necessary anymore to mind Firefox behavior.

#container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  justify-self: center;/* ? what did you mean here ? */
  /* did you mean : */
  display:flex;
  align-items:center;
}
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: plum;
  grid-area: auto / right;
}

<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

or did you mean:

#container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  align-self: center;
  justify-self:center
  }
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: plum;
  grid-area: auto / right;
}

<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

Here is a codepen to play with live.

edited Aug 30 '21 at 19:14

answered Feb 15 '17 at 03:21

G-Cyrillus

101,410
14
105
129

2

Thanks. Unfortunately, this only works properly if `grid-row-gap` is not specified. If `grid-row-gap` is specified, the renderer will insert as many gaps as there are hudge rows.... – Marlius Feb 15 '17 at 07:04
(`justify-self: center;` is used only because I used vertically oriented text in my tests which I wanted centered in the column. I should have removed it from the example that I posted. Sorry!) – Marlius Feb 15 '17 at 07:05
@Marlius for the `grid-row-gap`, you can turn it into margin . I forked my previous pen to add the margin (gap) and writing-mode .http://codepen.io/gc-nomade/pen/ygwbyv (there was already a gap example on the third example in the first codepen http://codepen.io/gc-nomade/pen/xgBVKB :) . also to work row height should not specified else than auto. another example using javascript to set the span value needed : http://codepen.io/gc-nomade/pen/BpZZQW (related to another similar question) – G-Cyrillus Feb 15 '17 at 10:10
@Marlius the jquery pen revisited with the gap value http://codepen.io/gc-nomade/pen/pRYPwK – G-Cyrillus Feb 15 '17 at 10:21
Interestingly, this approach works if you use a large *negative* index: `row-grid: 1 / -1000`. A positive span index fails, however, due to it being based off the *explicit grid lines*, e.g. the rows you declare, of which you have none. [CSS Grid Reference](https://www.w3.org/TR/css3-grid-layout/#grid-placement-int) – AManOfScience Mar 27 '17 at 15:25
@AManOfScience Can you tell me where it fails. Actually grid is still experimental and spec still in evolution (`grid-row : span all;` as for column would be useful), For tthe browsers where i tested this , it worked (FF & webkit) The other (& solid) approach is to use javascript to count elements to set the rows to span. as commented earlier and linked to an example ;) – G-Cyrillus Mar 27 '17 at 17:57
1

By *fail* I was referring to your above conversation about `grid-row-gap`. I'm going off the W3 document I linked; "If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid." Using a negative index provides a pure-CSS solution, for reasons unknown to me. – AManOfScience Mar 27 '17 at 18:00
@AManOfScience okay, good point id did not pay attention to !! – G-Cyrillus Mar 27 '17 at 18:05
Your update states that `grid-row: 1 / -1` now works in Firefox, but that does not seem to be the case. If you change `grid-row-end: span 1000` to `grid-row-end: -1` it will only be in the first row. – fritzmg Aug 31 '23 at 14:51
@fritzmg it does work but you need to set a numbers of row, value of spanning has to be turned to `grid-template-rows:repeat(100,auto);` So same issue if you set vertical gaps ;) forked of the demo pen https://codepen.io/gc-nomade/pen/XWoKqoW – G-Cyrillus Sep 01 '23 at 13:59
It does work yes, but not when the amount of rows is not fixed. – fritzmg Sep 01 '23 at 14:25
@fritzmg yes indeed, FF, chrome ... they all have the same behavior . both ways are now working in latest browser. I do not think that it will be possible without it in the future :( – G-Cyrillus Sep 02 '23 at 10:45

score -1 · Answer 3 · answered Aug 14 '22 at 00:03

-1

As of today this is a feature still up for consideration as per this https://github.com/w3c/csswg-drafts/issues/2402

answered Aug 14 '22 at 00:03

Milan Adamovsky

1,519
1
10
5

Items that span all columns/rows using CSS grid layout

3 Answers3

Linked

Related