使用 CSS 网格布局跨越所有列/行的项目

Question

随着 CSS 网格布局模块即将在 Firefox 和 Chrome 中发布，我想我会尝试掌握如何使用它。

我尝试创建一个简单的网格，其中一个项目 a 跨越所有行的左侧，其他项目（b、c、d、e 等.) 跨越各个行的右侧。跨越行右侧的项目数量是可变的，因此可能有b、c、d、e 等的任意组合，所以我使用的是grid-auto-rows 属性.因此，我无法为 a 定义固定数量的跨行，但我希望 a 跨所有个可用行。

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

我应该怎么做才能让a 跨越所有行而不知道最终会有多少行？

Answer 1

编辑： 不要介意这个答案，除非你是关于一个过时的浏览器 ;)

---

您可以使用一个 hudge 值来跨越 （至少您认为最大行数可能是）：

grid-row: 1 / -1; 12/19 ，仍然无法在 FF 中工作。

编辑 grid-row: 1 / -1; 现在也可以在最新的 Firefox 中使用。 不必再考虑 Firefox 的行为了。

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

或者你的意思是：

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

这里是a codepen to play with live。

Answer 2

我遇到了同样的情况并找到了一个干净的解决方案。

尝试使用巨大的行跨度值，而不是：

grid-column: 1/-1;

由于负数从右开始计数，此代码将grid-column 指定到最后一列的末尾。

注意：如果这不适用，请在下面的评论中查看 Jonny Green 的解决方案。