Question

我试图使我的行在CSS网格中具有相同的高度，但是同时，应该由vh指定最大高度。我想要的是，如果有4行，最大高度为100vh，而当前4行中最大的高度为70vh，我希望所有行都为{ {1}}。但是，如果假定最大高度为70vh，则我希望所有行的高度均为120vh。有办法吗？以下是到目前为止的代码，我是CSS网格的新手，请帮帮我！如果有什么简单的方法可以实现我想要的功能，请帮助指导我，谢谢！

100vh

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

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>

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;
}

CSS网格-行的高度相同（最大高度）

2 个答案: