将网格项目设置为相同的高度答案

【问题标题】：Set grid items to be same height将网格项目设置为相同的高度
【发布时间】：2021-03-12 14:44:32
【问题描述】：

我有一个非常具体的网格问题。我试图使所有网格项目的大小相同。 stretch 在这种情况下不是一个选项，因为某些项目跨越两行。当我添加align-items: center 时，这并没有解决问题。我真的没有找到任何帮助。

#cards {
  padding: 0 7vw;
  margin-top: 3vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
}

.card:nth-child(1),
.card:nth-child(3) {
  grid-row: span 2;
}

.card {
  display: block;
  border: solid 5px #000;
  box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%);
  border-radius: 8px;
  margin: 5%;
  overflow: hidden;
  text-align: center;
}

<div id="cards">
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 1</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 2</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 3</h2>
      <p>Hello world</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 4</h2>
      <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p>
    </div>
  </div>
</div>

非常感谢您的想法。（我是 Stack Overflow 的新手，所以请随时提供任何其他建议来帮助我进一步改进问题）

【问题讨论】：

嗨，欢迎来到 SO。代码必须作为最小可重现代码 sn-p (ctrl + m) 直接包含在问题中。如果指向您的 codepen 的链接更改或被删除或内容发生更改，则该问题对社区没有进一步的价值。
这能回答你的问题吗？ Equal height rows in CSS Grid Layout
不，别担心，我在发布问题之前进行了研究。
感谢您的建议。非常感谢。

标签： html css responsive css-grid

【解决方案1】：

您可以像这样添加更多行：

grid-template: ".   two   ." 1fr
               "one two  three" 1fr
               "one four three" 1fr
               ".   four  ." 1fr / 
               1fr  1fr  1fr;

在儿童上使用适当的grid-area。

这是 sn-p（我还在孩子身上添加了 height: 90%; 以使它们适合单元格高度但保持边距）：

#cards {
  padding: 0 7vw;
  margin-top: 3vh;
  display: grid;
  grid-template: ".   two  ." 1fr
                 "one two three" 1fr
                 "one four three" 1fr
                 ".   four  ." 1fr / 
                 1fr  1fr  1fr;
  align-items: center;
  justify-content: center;
}

.card:nth-child(1){
  grid-area: one;
}
.card:nth-child(2){
  grid-area: two;
}
.card:nth-child(3){
  grid-area: three;
}
.card:nth-child(4){
  grid-area: four;
}

.card {
  display: block;
  border: solid 5px #000;
  box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%);
  border-radius: 8px;
  margin: 5%;
  overflow: hidden;
  text-align: center;
  height: 90%;
}

<div id="cards">
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 1</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 2</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 3</h2>
      <p>Hello world</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 4</h2>
      <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

试试这个：我尝试了很多单位，当 % 工作时，我只是使用它

#cards {
  padding: 0 7vw;
  margin-top: 3vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
}

.card:nth-child(1),
.card:nth-child(3) {
  grid-row: span 2;
}

.card {
  display: block;
  border: solid 5px #000;
  box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%);
  border-radius: 8px;
  margin: 5%;
  overflow: hidden;
  text-align: center;
  height: 90%;
}

.card:nth-child(1), .card:nth-child(3) {
  height: 45%;
}

<div id="cards">
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 1</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 2</h2>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 3</h2>
      <p>Hello world</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2 class="card-title">Item 4</h2>
      <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p>
    </div>
  </div>
</div>

【讨论】：