Grid layout: cell isn't covering all specified rows

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>

grid-row: 1 / 3; says from start of row one to start of row 3, thus covering only 2 rows. 1/4 is the real span you want — Neil, Sep 28 '18 at 19:45

score 3 · Answer 1 · answered Sep 28 '18 at 19:49

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>

score 2 · Accepted Answer · answered Sep 28 '18 at 19:44

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>

Guess I failed to grasp that from the docs I've read. Still a tiny bit confused since the other answer gives the same results with different values, but I'll figure it out. Thanks! — Jeto, Sep 28 '18 at 19:51

score 2 · Answer 3 · answered Sep 28 '18 at 19:54

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

Grid layout: cell isn't covering all specified rows

3 Answers3