使用 CSS Grid，如何在同一列上有多个元素，跨越多行？

Question

我下面的 HTML 和 CSS（.type-a部分），它使用的是 CSS Grid。

（您可以在此处查看 CodePen）

我需要的是使所有具有.col1类的元素在第一列上正确对齐 - 同时.col2跨越整行。

更改 HTML 不是一个选项（我知道通过更改 HTML 很容易解决这个问题）。

我们永远不会确切知道.col1将有多少行，我确实希望避免创建 1000 行以使其工作（就像您在 上看到的那样.type-b）。

.container {
  display: grid;
  grid-auto-columns: 50%;
  grid-auto-flow: dense;
  /* Decorative */
  color: #ffffff;
  text-align: center;
}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

// Type B
.type-b>.col2 {
  grid-row: 1 / 100;
}

// Decorative Styles
.divider {
  height: 1px;
  background: #B0BEC5;
  margin: 30px;
}

.content-a {
  background: #5C6BC0;
}

.content-b {
  background: #7E57C2;
}

.content-c {
  background: #AB47BC;
}

.content-d {
  background: #FFA726;
}

<h3>Type A</h3>
<div class="container type-a">
  <div class="col1 content-a">Content A</div>
  <div class="col1 content-b">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac auctor erat. Phasellus porta nec dolor ut egestas. Praesent pretium elit vel risus iaculis, vel condimentum lorem volutpat. Nunc placerat massa ac venenatis dictum. Donec ullamcorper, magna
    efficitur laoreet euismod, arcu neque aliquam purus, sed ornare dolor sem sed est.
  </div>
  <div class="col1 content-c">Content C</div>
  <div class="col2 content-d">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="divider"></div>

<h3>Type B (What I want)</h3>
<div class="container type-b">
  <div class="col1 content-a">Content A</div>
  <div class="col1 content-b">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac auctor erat. Phasellus porta nec dolor ut egestas. Praesent pretium elit vel risus iaculis, vel condimentum lorem volutpat. Nunc placerat massa ac venenatis dictum. Donec ullamcorper, magna
    efficitur laoreet euismod, arcu neque aliquam purus, sed ornare dolor sem sed est.
  </div>
  <div class="col1 content-c">Content C</div>
  <div class="col2 content-d">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

Answer 1

好像可以设置

.col2 { 
   grid-row-end: span 99999;
}

它会跨越网格中的行数，除非您的行数超过 99999。不太理想，但似乎在 Firefox 和 Chrome 中有效！

代码笔在这里： https: //codepen.io/anon/pen/qgmpvv