CSS Grid with some elements spanning rows, others spanning columns

Question

For the items shown in this codepen, I would like "mango" to stretch from the very top to the very bottom.

Since

.orange {
  grid-column: 1 / 3;
}

worked for the orange element. I thought

.mango {
  grid-row: 1 / 2;
  grid-column: 3
}

would work, but it has no effect. Why doesn't grid-row work? I also tried experimenting with grid-flow setting for .fruit-box.

Answer 1

You seem to have 3 rows here. Try this:

.mango {
    background: yellow;
    grid-column: 3;
    grid-row: 1/3; /* FROM 1 to 3 */
}

And if you use:

grid-template-columns: repeat(3, 2fr);
grid-template-rows: repeat(2, 2fr);

To establish your grid you can extend your cells to the last row (regardless of how many rows you may have) using -1, like this:

.mango {
    background: yellow;
    grid-row: 1/-1; /* from 1 to the end */
}