question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[css-grid] Bug when specifying two values for grid-gap

See original GitHub issue

Test 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:closed
  • Created 5 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
yepninjacommented, May 16, 2018

I forgot about two values 🤦‍♂️ I’ll fix it in few days.

0reactions
aicommented, Jun 2, 2018

Released in 8.6 “Follow Reason”

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found