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

Question

我在下面的 HTML 和 CSS(.type-a 部分)中使用了 CSS 网格。

( you can see the CodePen clicking here )

我需要的是用 .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