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?

Quandary

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. – Coremaker

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. – Coremaker

I'm having the same issue. Supossedly grid-row: 1 / -1 should do it, but it doesn't work with auto rows apparently :( – Enuresis

Answer 1

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.

Outbuilding

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. – Strung

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. – Swing

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). – Cliffhanger

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... – Halflight

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. – Seventeenth

This solution will only work in situations where there is an "explicit grid". It will not work with implicit grids. – Lout

Answer 2

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.

Vickeyvicki

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.... – Quandary

(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!) – Quandary

@Quandary for the grid-row-gap, you can turn it into margin . I forked my previous pen to add the margin (gap) and writing-mode .codepen.io/gc-nomade/pen/ygwbyv (there was already a gap example on the third example in the first codepen 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 : codepen.io/gc-nomade/pen/BpZZQW (related to another similar question) – Vickeyvicki

@Quandary the jquery pen revisited with the gap value codepen.io/gc-nomade/pen/pRYPwK – Vickeyvicki

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 – Schacker

@Schacker 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 ;) – Vickeyvicki

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. – Schacker

@Schacker okay, good point id did not pay attention to !! – Vickeyvicki

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. – Nealneala

@Nealneala 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 codepen.io/gc-nomade/pen/XWoKqoW – Vickeyvicki

It does work yes, but not when the amount of rows is not fixed. – Nealneala

@Nealneala 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 :( – Vickeyvicki

Answer 3

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

Reames