设置 CSS 网格中第一行的高度

Question

我有一个基本的 CSS 网格，使用 display: grid 并且我无法使用 grid-template-rows 设置第一行的高度。

我的 HTML/CSS 大致是这样的：

.gridWrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 20px auto auto;
}

.row1 {
  grid-row-end: 1;
  background-color: lightslategray;
}

.row2 {
  grid-row-end: 2;
  background-color: lightblue;
}

.row3 {
  grid-row-end: 3;
  background-color: lightskyblue;
}

.col1 {
  grid-column-end: 1;
}

.col2 {
  grid-column-end: 2;
}

<div class="gridWrapper">
  <div class="row1 col1">Col1</div>
  <div class="row1 col2">Col2</div>
  <div class="row2 col1">A</div>
  <div class="row2 col2">B</div>
  <div class="row3 col1">D</div>
  <div class="row3 col2">D</div>
</div>

然而，结果是：

这发生在最新的 Chrome 和 Safari 中（我在 Mac），这让我相信我误解了一些关于网格布局的东西 CSS。

如何设置第一行的高度？

Answer 1

问题是 - grid-column-end (MDN) 可能有点误导。 row1 在你的例子中应该有 grid-column-end: 2; 而不是 grid-column-end: 1;.

要解决此问题，您只需将 1 添加到每个 grid-column-end 和 grid-row-end 属性.

这是具有固定值的代码段：

body {
  margin: 0;
}
.gridWrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 20px auto auto;
}

.row1 {
  grid-row-end: 2;
  background-color: lightslategray;
}

.row2 {
  grid-row-end: 3;
  background-color: lightblue;
}

.row3 {
  grid-row-end: 4;
  background-color: lightskyblue;
}

.col1 {
  grid-column-end: 2;
}

.col2 {
  grid-column-end: 3;
}

<div class="gridWrapper">
  <div class="row1 col1">Col1</div>
  <div class="row1 col2">Col2</div>
  <div class="row2 col1">A</div>
  <div class="row2 col2">B</div>
  <div class="row3 col1">D</div>
  <div class="row3 col2">D</div>
</div>

此外 - 我真的不认为这里需要 grid-column-end。您只需使用 grid-column 和 grid-row 属性即可获得相同的结果（我认为这不那么令人困惑）。

body {
  margin: 0;
}
.gridWrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 20px auto auto;
}

.row1 {
  grid-row: 1;
  background-color: lightslategray;
}

.row2 {
  grid-row: 2;
  background-color: lightblue;
}

.row3 {
  grid-row: 3;
  background-color: lightskyblue;
}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

<div class="gridWrapper">
  <div class="row1 col1">Col1</div>
  <div class="row1 col2">Col2</div>
  <div class="row2 col1">A</div>
  <div class="row2 col2">B</div>
  <div class="row3 col1">D</div>
  <div class="row3 col2">D</div>
</div>

Answer 2

您正在定义 grid-row-end 属性，但您正在使用 grid-row-start 行。这就是为什么事情没有像您预期的那样工作。

如果您希望 .row1 个元素覆盖第一行，那么您需要它们跨越该行——这意味着从第 1 行到第 2 行。

所以不是这个：

grid-row-end: 1

使用以下任何一个：

grid-row-start: 1
grid-row-end: 2
grid-row: 1 / 2

.gridWrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 20px auto auto;
}

.row1 {
  /* grid-row-end: 1; */
  grid-row-end: 2;  /* new */
  background-color: lightslategray;
}

.row2 {
  /* grid-row-end: 2; */
  grid-row-end: 3;  /* new */
  background-color: lightblue;
}

.row3 {
  /* grid-row-end: 3; */
  grid-row-end: 4;  /* new */
  background-color: lightskyblue;
}

.col1 {
  /* grid-column-end: 1; */
  grid-column-end: 2;  /* new */
}

.col2 {
  /* grid-column-end: 2; */
  grid-column-end: 3;  /* new */
}

<div class="gridWrapper">
  <div class="row1 col1">Col1</div>
  <div class="row1 col2">Col2</div>
  <div class="row2 col1">A</div>
  <div class="row2 col2">B</div>
  <div class="row3 col1">D</div>
  <div class="row3 col2">D</div>
</div>

设置 CSS 网格中第一行的高度

Set height of first row in CSS grid

html

css

grid-layout

css-grid