基于CSS Grid列的流，但每行的高度相等[重复]

Question

编辑：在链接this 之前，请关闭并告诉我问题是一样的。请理解我不希望所有行的高度相同。我希望每个行的高度都相等，但它们没有被订购
1 2
3 4

但是
1 3
2 4

相反。所以这个不同。 请不要在阅读完标题后关闭？

我了解 CSS 网格默认设置是每行具有相同高度的列。 但这只有在您拥有基于行的流程时才有效。

我正在尝试构建的内容： 2-col 布局，在某个视口上中断为 1-col 布局。 在这种情况下，第一行的全部内容应该出现在第二行的内容之前。
不过，只要存在 2 列，每行的两个元素就应该具有相同的高度。
此外，行数及其内容也各不相同，但只要有 2 列，两行应具有相同的高度（每行），只要只有 1 列，每行占用的空间也一样多根据需要。

In this codepen，我希望 B1 与 A1 匹配，B2 与 A2 匹配，等等。当然是通用的，因为内容不同，行数也不同。此外，它们不需要具有相同数量的左/右条目。

 <div class="grid">
  <div class="left-side sub">
    <div class="A" style="height: 100px">A1</div>
    <div class="A" style="height: 150px">A2</div>
    <div class="A" style="height: 50px">A3</div>
  </div>
  <div class="right-side sub">
    <div class="B">B1</div>
    <div class="B">B2</div>
    <div class="B">B3</div>
  </div>
</div>

.A {
  background-color: dodgerblue;
  margin: 10px 0;
  grid-column: 1;
}

.B {
  background-color: red;
  margin: 10px 0;
}

.left-side {
}
.right-side {
}

.sub {
  /* display: contents; */
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2%;
  row-gap: 50px;
}
@media screen and (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Answer 1

你可以：

<div class="grid">
 <div class="A1" style="height: 100px">A1</div>
 <div class="A2" style="height: 150px">A2</div>
 <div class="A3" style="height: 50px">A3</div>
 <div class="B1">B1</div>
 <div class="B2">B2</div>
 <div class="B3">B3</div>
</div>


    .grid {
    display: grid;
    grid-template-areas:
        "A1 B1"
        "A2 B2"
        "A3 B3";
    gap: 10px;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(3, auto);
    grid-auto-rows: 1fr;
    inline-size: 500px;
}

.grid > * {
    background-color: rgba(111,41,97,.4);
    border-radius: 5px;
    padding: 10px;
}

.A1, .A2, .A3 {
    margin: 10px 0;
    background-color: dodgerblue;
}

.B1, .B2, .B3 {
    margin: 10px 0;
    background-color: red;
}
.A1 {
        grid-area: A1;
}
.A2 {
        grid-area: A2;
}
.A3 {
        grid-area: A3;
}
.B1 {
        grid-area: B1;
}
.B2 {
        grid-area: B2;
}
.B3 {
        grid-area: B3;
}

@media screen and (max-width: 600px) {
        .grid {
        grid-auto-rows: 1fr;
        grid-template-rows: repeat(6, 1fr);
        grid-template-areas:
        "A1 A1"    
        "B1 B1"
        "A2 A2"    
        "B2 B2"
        "A3 A3"
        "B3 B3";
        }
}