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] grid-gap is not retained through media queries

See original GitHub issue

I wrote this test css-grid code and realised that the grid-gap functionality wasn’t getting carried through media queries.

/* changing a grid-template with a media-query */
.grid {
  display: grid;
  grid-gap: 10px; /* grid-gap defined here */
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

.cell-A {
  grid-area: a;
}

.cell-B {
  grid-area: b;
}

.cell-C {
  grid-area: c;
}

.cell-D {
  grid-area: d;
}

.cell-E {
  grid-area: e;
}

.cell-F {
  grid-area: f;
}

@media (min-width: 600px){
  .grid {
    /* grid-gap setting should be remembered here */
    grid-template-areas:
      "a   b   c"
      "d   e   f";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
  }
}

It compiles into this:

.grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-rows: 100px 10px 100px 10px 100px;
  -ms-grid-columns: 1fr 10px 1fr;
      grid-template: "a   b" 100px
 "c   d" 100px
 "e   f" 100px /
 1fr  1fr;
}

.cell-A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.cell-B {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: b;
}

.cell-C {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

.cell-D {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: d;
}

.cell-E {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: e;
}

.cell-F {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  grid-area: f;
}

@media (min-width: 600px) {
  .grid {
        grid-template-areas: "a   b   c"
 "d   e   f";

    /* !!! IT HAS FORGOTTEN ABOUT THE GRID-GAP SETTING !!! */

    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-rows: (100px)[2];
    grid-template-rows: repeat(2, 100px);
  }
  .cell-A {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .cell-B {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .cell-C {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .cell-D {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .cell-E {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  .cell-F {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }
}

My idea is that if the grid-area name is consistent throughout various media-queries then it is safe to assume that it is looking at the same grid.

If the grid-gap setting is defined outside of a media query, then that gap setting needs to be applied as a default across all grids that share that same area name.

.grid {
  display: grid;
  grid-gap: 10px;/* grid-gap defined */
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}


@media (min-width: 600px){
  .grid {
    /* grid-gap: 10px; << grid-gap inherited */
    grid-template-areas:
      "a   b   c"
      "d   e   f";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
  }
}

If a grid-gap setting is applied inside of a media query, it will only be applied as a default to other grids that live inside media queries that agree with the grid-gap media query.

.grid {
  display: grid;
  /* grid-gap ignored */
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}


@media (min-width: 600px){
  .grid {
    grid-gap: 10px;/* grid-gap defined */
    grid-template-areas:
      "a   b   c"
      "d   e   f";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
  }
}

@media (min-width: 900px){
  .grid {
    /* grid-gap: 10px; << grid-gap inherited */
    grid-template-areas:
      "a   b   c   d   e   f";
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 100px;
  }
}

@media (max-width: 400px){
  .grid {
    /* grid-gap ignored */
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e"
      "f";
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 100px);
  }
}

If there is a conflict then the grid-gap setting that is defined last in the style sheet should have the priority.