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

Question

我对网格有一个非常具体的问题。我试图用相同大小的所有网格项目。 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 的新手，所以请随时提出任何其他建议以帮助我进一步改进问题）

Answer 1

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

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

在 children 上使用适当的 grid-area。

这是代码片段（我还在 children 上添加了 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>

Answer 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>

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

Set grid items to be same height

html

css

css-grid

responsive