Items that span all columns/rows using CSS grid layout
HtmlCssGridCss GridHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.