Items that span all columns/rows using CSS grid layout

问题

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?

回答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.

回答2:

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

#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.

来源：https://stackoverflow.com/questions/42239778/items-that-span-all-columns-rows-using-css-grid-layout

标签

html

css

grid

css-grid