I ran into a weird problem when I was experimenting with layouts, however when I wanted to change a particular row to occupy two rows, the whole layout gets shrunk down.
SCSS:
.parent {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(14, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
background-color: black;
.div1 {
grid-area: 1 / 2 / 7 / 3;
}
.div2 {
grid-area: 1 / 3 / 7 / 4;
}
.div3 {
grid-area: 1 / 4 / 7 / 5;
}
.div4 {
grid-area: 1 / 5 / 7 / 6;
}
.div5 {
grid-area: 1 / 6 / 7 / 7;
}
.div6 {
grid-area: 1 / 7 / 7 / 8;
}
.div7 {
grid-area: 1 / 8 / 7 / 9;
}
.div8 {
grid-area: 1 / 9 / 7 / 10;
}
.div9 {
grid-area: 7 / 2 / 7 / 10;
}
.div10 {
grid-area: 9 / 2 / 11 / 10;
}
.div11 {
grid-area: 11 / 2 / 13 / 10;
}
.div14 {
grid-area: 13 / 2 / 15 / 10;
}
.div12 {
grid-area: 1 / 1 / 15 / 2;
}
.div13 {
grid-area: 1 / 10 / 15 / 11;
}
}
div {
background-color: aquamarine;
}
The culprit in this case is the div called Row 9.
Currently it's grid area is 7/2/7/10
It gets shrunk down, almost like it's resetting when I change it to 7/2/9/10
Is there something I'm missing here or was there a setting I may have missed?
Thanks in advance!
It is just because you're using 1fr as your row height so your rows are not a fixed height, rather based on the content. Your .div9 is originally taking up a single row whereas the ones below it take up 2 (and a 20px row gap each). This means 1fr is equal to the content of .div9 (i.e. "Row 9"). As soon as .div9 covers 2 rows (and the 20px gap), 1fr becomes a much smaller number of pixels as the content "Row 9" barely extends beyond the 20px row gap. As such everything shrinks. If you use Firefox dev tools and turn on their useful overlay grid you will be able to see exactly what is happening.