Grid layout: cell isn't covering all specified rows [duplicate] - css

Question

This question already has answers here:
Make row stretch across all columns in CSS Grid
(3 answers)
Closed 4 years ago.
Could anyone help me figure out why .side isn't covering the third row in the following snippet? (Also, why is the third row so far down it generates a vertical scrollbar?)
I'm sorry to ask what is probably an extremely basic question, this is for a side project and I usually don't do CSS myself, just trying to learn grid as it feels the most natural to me.
Note: I'm guessing grid-row: 2 is equivalent to grid-row: 2 / 2 (same for the rest) but I wrote it explicitly just to be 100% sure (makes no difference).
.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>

Answer 1

You just have to change the 3 to a 4 as you want .side to start at the first line (the top of row 1) and end at the fourth line (the bottom of row 3). There is a good resource here: 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>

Answer 2

You should use n+1 in the grid-row-end to place the element until the nth row. Your code need to be like this:
.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>

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>