[css-grid] Bug when specifying two values for grid-gap
See original GitHub issueTest case:
.a-two {
grid-gap: 2rem 1rem;
grid-template-rows: 1fr minmax(100px, 1fr) 2fr;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"head-two head-two head-two"
"nav-two main-two main-two"
"nav-two foot-two foot-two";
}
Expected:
.a-two {
grid-gap: 2rem 1rem;
-ms-grid-rows: 1fr 2rem minmax(100px, 1fr) 2rem 2fr;
grid-template-rows: 1fr minmax(100px, 1fr) 2fr;
-ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"head-two head-two head-two"
"nav-two main-two main-two"
"nav-two foot-two foot-two";
}
Actual:
.a-two {
grid-gap: 2rem 1rem;
-ms-grid-rows: 1fr 2rem 1rem minmax(100px, 1fr) 2rem 1rem 2fr;
grid-template-rows: 1fr minmax(100px, 1fr) 2fr;
-ms-grid-columns: 1fr 2rem 1rem 1fr 2rem 1rem 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"head-two head-two head-two"
"nav-two main-two main-two"
"nav-two foot-two foot-two";
}
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Setting different lengths for grid gaps in CSS Grid
Is there any grid trick I can do to achieve this, grid-row-gap only seems to take one value, which it uses for all...
Read more >gap - CSS: Cascading Style Sheets - MDN Web Docs
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
Read more >CSS Grid Gotchas And Stumbling Blocks - Smashing Magazine
A true grid is two-dimensional. The two dimensions are rows and columns, and with grid layout you can control both at once.
Read more >CSS grid-gap property - W3Schools
The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property...
Read more >Preventing a Grid Blowout | CSS-Tricks
Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I forgot about two values 🤦♂️ I’ll fix it in few days.
Released in 8.6 “Follow Reason”