Fix grid gap inheritance from row-gap and column-gap longhands

This commit is contained in:
dualfroz committed 2026-09-11 23:11:28 +02:00
1 parent 9d01a08e29
commit 1b1d88a522
3 files changed
+50 -4

No files matched your search

+20
View File
@@ -301,3 +301,23 @@
grid-template-rows: repeat(2, 100px);
}
}
.longhand-gap {
display: grid;
grid-column-gap: 50px;
grid-row-gap: 40px;
grid-template-areas:
"p p"
"q q";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 100px);
}
/* must inherit gap from .longhand-gap */
.longhand-gap.modifier {
grid-template-areas:
"p p"
"q q";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 100px);
}
+25
View File
@@ -435,3 +435,28 @@
grid-template-rows: repeat(2, 100px);
}
}
.longhand-gap {
display: -ms-grid;
display: grid;
grid-column-gap: 50px;
grid-row-gap: 40px;
grid-template-areas:
"p p"
"q q";
-ms-grid-columns: 1fr 50px 1fr;
grid-template-columns: repeat(2, 1fr);
-ms-grid-rows: 100px 40px 100px;
grid-template-rows: repeat(2, 100px);
}
/* must inherit gap from .longhand-gap */
.longhand-gap.modifier {
grid-template-areas:
"p p"
"q q";
-ms-grid-columns: 1fr 50px 1fr;
grid-template-columns: repeat(2, 1fr);
-ms-grid-rows: 100px 40px 100px;
grid-template-rows: repeat(2, 100px);
}