<分区>
谁能帮我弄清楚为什么 .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>