如何在小视图中创建等高行和堆叠列？

Question

我想创建具有两列和一些行的网格，使得两行具有相同的高度（最大高度）。但就我而言，正在创建不等高度的行。例如，column1: row1 的内容较少，因此其高度较小，但如果相邻的 column2: row1 的内容较多，则其高度会增加，从而创建不相等/未对齐的列。

我想要实现的网格是更多桌面，像这样适用于小屏幕。

您能告诉我怎样才能得到想要的结果吗？

非常感谢

Answer 1

有这样的事吗？

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: max-content;
}

.column {
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  font-family: cursive;
}

<div class="container">
  <div class="column" style="background-color: lightblue;">
    <p>Column 1 Content</p>
    <p>Column 1 Content</p>
    <p>Column 1 Content</p>
    <p>Column 1 Content</p>
  </div>
  <div class="column" style="background-color: lightgreen;">
    <p>Column 2 Content</p>
    <p>Column 2 Content</p>
    <p>Column 2 Content</p>
    <p>Column 2 Content</p>
    <p>Column 2 Content</p>
    <p>Column 2 Content</p>
  </div>
  <div class="column" style="background-color: hotpink;">
    <p>Column 3 Content</p>
    <p>Column 3 Content</p>
  </div>
  <div class="column" style="background-color: grey;">
    <p>Column 4 Content</p>
    <p>Column 4 Content</p>
    <p>Column 4 Content</p>
    <p>Column 4 Content</p>
  </div>
</div>