CSS网格布局 - 行高相同（带最大高度）

Question

我正在尝试使CSS网格中的行具有相同的高度，但同时应该指定一个最大高度为vh。我想要的是，如果有4行，最大高度为100vh，并且当前四行中最大的高度为70vh，那么我希望所有行都是70vh。但是，如果最大高度被认为是120vh，我希望所有行的高度都为100vh。有没有办法做到这样？以下是我到目前为止的代码，我是CSS网格的新手，请帮帮我！如果有任何更简单的方法来实现我的目的，请帮助指导我，谢谢！

```css .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* grid-template-rows: ???? */ gap: 10px; } ```

.project-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    row-gap: 1%;
    grid-template-areas: "card" "activities" "requirements" "quotations" "notations"
}

.card-row {
    grid-area: card;
}

.activities-box {
    grid-area: activities;
    overflow: auto;
}

.requirements-box {
    grid-area: requirements;
    overflow: auto;
}

.quotations-box {
    grid-area: quotations;
    overflow: auto;
}

.notations-box {
    grid-area: notations;
    overflow: auto;
}

这样，所有行都会遵循相同的最大高度，但没有设置最大高度。

- jason

Answer 1

只需将 max-height 设置为网格项即可：

.box {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 1fr;
  row-gap: 5px;
}

.box > * {
  max-height:100vh;
  overflow:auto;
  border:2px solid red;
  background:#f2f2f2;
  box-sizing:border-box;
}

<div class="box">
  <div><div style="height:50vh"></div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

如果内容超过100vh;

.box {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 1fr;
  row-gap: 5px;
}

.box > * {
  max-height:100vh;
  overflow:auto;
  border:2px solid red;
  background:#f2f2f2;
  box-sizing:border-box;
}

body {
  margin:0;
}

<div class="box">
  <div><div style="height:130vh"></div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

- Temani Afif

Answer 2

你可以使用repeat函数，其语法为repeat(times, measurement)，当然你需要设置宽度，该宽度将被分成你所设置的次数。

.project-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(4, 1fr);
    row-gap: 1%;
    grid-template-areas: "card" "activities" "requirements" "quotations" "notations"
}

.card-row {
    grid-area: card;
}

.activities-box {
    grid-area: activities;
    overflow: auto;
}

.requirements-box {
    grid-area: requirements;
    overflow: auto;
}

.quotations-box {
    grid-area: quotations;
    overflow: auto;
}

.notations-box {
    grid-area: notations;
    overflow: auto;
}

- Umutambyi Gad

---

好的，我不知道在网格布局中有一个repeat（）函数，会改用它，看起来更干净。谢谢！ - jason