网格布局：单元格没有覆盖所有指定的行[重复]答案

【问题标题】：Grid layout: cell isn't covering all specified rows [duplicate]网格布局：单元格没有覆盖所有指定的行[重复]
【发布时间】：2019-03-04 19:49:51
【问题描述】：

谁能帮我弄清楚为什么.side 没有覆盖以下sn-p 中的第三行？（另外，为什么第三行这么远会生成一个垂直滚动条？）

很抱歉问这个问题可能是一个非常基本的问题，这是一个业余项目，我自己通常不做 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>

【问题讨论】：

网格行：1 / 3；从第一行开始到第三行开始，因此只覆盖 2 行。 1/4 是你想要的真实跨度

标签： css css-grid

【解决方案1】：

您只需将 3 更改为 4，因为您希望 .side 从第一行（第 1 行的顶部）开始并在第四行（第 3 行的底部）结束。这里有一个很好的资源：@987654321@

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

【讨论】：

【解决方案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>

【讨论】：

我想我没能从我读过的文档中理解这一点。仍然有点困惑，因为另一个答案给出了不同值的相同结果，但我会弄清楚的。谢谢！

【解决方案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>

【讨论】：