Fix grid gap inheritance from row-gap and column-gap longhands
This commit is contained in:
1 parent
9d01a08e29
commit
1b1d88a522
3 files changed
+50
-4
No files matched your search
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
Reference in new issue
Block a user