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

Question

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>