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?

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.