网格布局：单元格未覆盖所有指定行

Question

请问有人能帮我解决以下代码中为什么.side不能覆盖第三行的问题吗？（另外，为什么第三行距离太远会生成垂直滚动条？）

非常抱歉问这个可能非常基础的问题，这是一个边缘项目，我通常不自己处理CSS，只是尝试学习网格布局，因为它对我来说最自然。

注意：我猜测grid-row: 2等同于grid-row: 2 / 2（其他同理），但我明确地写出来只是为了100％确定（没有区别）。

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 250px 1fr;
}

header {
  grid-row: 1 / 1;
  grid-column: 2 / 2;
  background-color: #ccf;
}

.side {
  grid-row: 1 / 3;
  grid-column: 1 / 1;
  background-color: #ddd;
}

.main {
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}

footer {
  grid-row: 3 / 3;
  grid-column: 2 / 2;
  background-color: #ccf;
}

<div class="layout">
  <header>header</header>
  <div class="side">side</div>
  <div class="main">main</div>
  <footer>footer</footer>
</div>

- Jeto

---

grid-row: 1 / 3; 表示从第一行开始到第三行的开头，因此仅覆盖两行。1/4 是您想要的实际跨度。 - Neil

Answer 1

您只需要将数字3更改为4，以便.side从第一行（第1行的顶部）开始，并在第四行（第3行的底部）结束。这里有一个很好的资源：https://css-tricks.com/snippets/css/complete-guide-grid/

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 250px 1fr;
}

header {
  grid-row: 1 / 1;
  grid-column: 2 / 2;
  background-color: #ccf;
}

.side {
  grid-row: 1 / 4;
  grid-column: 1 / 1;
  background-color: #ddd;
}

.main {
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}

footer {
  grid-row: 3 / 3;
  grid-column: 2 / 2;
  background-color: #ccf;
}

<div class="layout">
  <header>header</header>
  <div class="side">side</div>
  <div class="main">main</div>
  <footer>footer</footer>
</div>

- N8Brown

Answer 2

您应该在 grid-row-end 中使用 n+1 将元素放置到第n行之前。您的代码需要像这样：

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 250px 1fr;
}

header {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background-color: #ccf;
}

.side {
  grid-row: 1 / 4;
  grid-column: 1 / 2;
  background-color: #ddd;
}

.main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

footer {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  background-color: #ccf;
}

<div class="layout">
  <header>header</header>
  <div class="side">side</div>
  <div class="main">main</div>
  <footer>footer</footer>
</div>

- Temani Afif

---

我猜我从我读过的文档中没有完全理解。虽然另一个答案使用不同的值给出了相同的结果，但我会弄清楚的。谢谢！ - Jeto

Answer 3

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 250px 1fr;
}
header {
  grid-row: 1 / 1;
  grid-column: 2 / 2;
  background-color: #ccf;
}
.side {
  grid-row: 1 / 4;
  grid-column: 1 / 1;
  background-color: #ddd;
}
.main {
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}

footer {
  grid-row: 3 / 3;
  grid-column: 2 / 2;
  background-color: #ccf;
}

<div class="layout">
  <header>header</header>
  <div class="side">side</div>
  <div class="main">main</div>
  <footer>footer</footer>
</div>

- Asiya Fatima