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
.
CodePudding user response:
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 */
}