.a {
  grid-gap: 1rem;
  -ms-grid-rows: 1fr 1rem minmax(100px, 1fr) 1rem 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 head  head"
      "nav  main  main"
      "nav  foot  foot";
}

.b {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: head;
}

.f > .b {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
}

.c {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-area: main;
}

.f > .c {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
}

.d {
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: nav;
}

.f > .d {
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
}

.e {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-area: foot;
}

.f > .e {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
}

.f {
  gap: 10px 20px;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto 10px auto 10px auto;
  grid-template-areas:
      "head head head"
      "nav main main"
      "nav foot foot";
}

.calc {
  -ms-grid-rows: 1fr -webkit-calc(1% + 5px) 1fr;
  -ms-grid-rows: 1fr calc(1% + 5px) 1fr;
  -ms-grid-columns: 1fr -webkit-calc(1% + 5px) 1fr;
  -ms-grid-columns: 1fr calc(1% + 5px) 1fr;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: -webkit-calc(1% + 5px);
  gap: calc(1% + 5px);
}

.a-shortcut {
  grid-gap: 1rem 2rem;
  -ms-grid-rows: 1fr 1rem minmax(100px, 1fr) 1rem 2fr;
  -ms-grid-columns: 1fr 2rem 100px 2rem 1fr;
  grid-template:
      "head-shortcut head-shortcut  head-shortcut" 1fr
      "nav-shortcut  main-shortcut  main-shortcut" minmax(100px, 1fr)
      "nav-shortcut  foot-shortcut  foot-shortcut" 2fr /
      1fr 100px 1fr;
}

.b-shortcut {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: head-shortcut;
}

.f-shortcut > .b-shortcut {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
}

.c-shortcut {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-area: main-shortcut;
}

.f-shortcut > .c-shortcut {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
}

.d-shortcut {
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: nav-shortcut;
}

.f-shortcut > .d-shortcut {
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
}

.e-shortcut {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-area: foot-shortcut;
}

.f-shortcut > .e-shortcut {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
}

.f-shortcut {
  grid-gap: 10px;
  -ms-grid-rows: auto 10px auto 10px auto;
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
  grid-template:
      "head-shortcut head-shortcut head-shortcut"
      "nav-shortcut main-shortcut main-shortcut"
      "nav-shortcut foot-shortcut foot-shortcut"
      / 1fr 1fr 1fr;
}

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

/* must not inherit gap from .parent .grid */
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 100px 100px 100px;
  -ms-grid-columns: 1fr 1fr;
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

.grid-2 {
  display: -ms-grid;
  display: grid;
  grid-gap: 50px;
  -ms-grid-rows: 100px 50px 100px 50px 100px;
  -ms-grid-columns: 1fr 50px 1fr;
  grid-template:
    "x   x" 100px
    "y   y" 100px
    "z   z" 100px /
    1fr  1fr;
}

.grid-2.modifier-b {
  grid-gap: 22px;
  grid-template-areas:
    "x   x"
    "y   y"
    "z   z";
  -ms-grid-columns: 1fr 22px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 100px 22px 100px 22px 100px;
  grid-template-rows: repeat(3, 100px);
}

/* must inherit gap from .grid-2.modifier-b */
.grid-2.modifier-b.foo {
  grid-template-areas:
    "x   x"
    "y   y"
    "z   z";
  -ms-grid-columns: 1fr 22px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 100px 22px 100px 22px 100px;
  grid-template-rows: repeat(3, 100px);
}

/* must inherit gap from .grid-2.modifier-b */
.grid-2.modifier-b.bar {
  grid-template-areas:
    "x   x"
    "y   y"
    "z   z";
  -ms-grid-columns: 1fr 22px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 100px 22px 100px 22px 100px;
  grid-template-rows: repeat(3, 100px);
}

/* must inherit gap from .grid-2.modifier-b */
.parent .grid-2.modifier-b.bar {
  grid-template-areas:
    "x   x"
    "y   y"
    "z   z";
  -ms-grid-columns: 1fr 22px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 100px 22px 100px 22px 100px;
  grid-template-rows: repeat(3, 100px);
}

/* must inherit gap from .grid-2 */
.grid-2.modifier {
  grid-template-areas:
    "x   x"
    "y   y"
    "z   z";
  -ms-grid-columns: 1fr 50px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 100px 50px 100px 50px 100px;
  grid-template-rows: repeat(3, 100px);
}

/* must inherit gap from .grid-2 */
.parent .grid-2 {
  grid-template-areas:
    "x   x"
    "y   y"
    "z   z";
  -ms-grid-columns: 1fr 50px 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 100px 50px 100px 50px 100px;
  grid-template-rows: repeat(3, 100px);
}

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

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

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

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

@media (max-width: 1400px){
  .grid-2 {
    -ms-grid-rows: 100px 50px 100px;
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template:
      "x   y   z" 100px
      "x   y   z" 100px
      / 1fr 1fr;
  }
  /* must inherit gap from .grid-2 */
  .grid-2.modifier {
    grid-template-areas:
      "x   x"
      "y   y"
      "z   z";
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 100px 50px 100px 50px 100px;
    grid-template-rows: repeat(3, 100px);
  }
  /* must inherit gap from .grid-2 */
  .grid-2.modifier.modifier-c {
    grid-template-areas:
      "x   x"
      "y   y"
      "z   z";
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 100px 50px 100px 50px 100px;
    grid-template-rows: repeat(3, 100px);
  }
  /* must inherit gap from .grid-2 */
  .parent .grid-2 {
    grid-template-areas:
      "x   x"
      "y   y"
      "z   z";
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 100px 50px 100px 50px 100px;
    grid-template-rows: repeat(3, 100px);
  }
}

@media (max-width: 1000px){
  .grid-2 {
    grid-gap: 20px;
    grid-template-areas:
      "x   y   z"
      "x   y   z";
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-rows: 100px 20px 100px;
    grid-template-rows: repeat(2, 100px);
  }
  /* must inherit gap from .grid-2 */
  .grid-2.modifier {
    grid-template-areas:
      "hi   hi   hi"
      "hi   hi   hi";
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-rows: 100px 20px 100px;
    grid-template-rows: repeat(2, 100px);
  }
}

@media (max-width: 700px){
  .grid-2 {
    grid-template-areas:
      "x   x   y   y   z   z";
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
    grid-template-columns: repeat(6, 1fr);
    -ms-grid-rows: 100px;
    grid-template-rows: 100px;
  }
  /* must NOT inherit gap from .grid-2 */
  .grid-2.modifier {
    grid-gap: 70px;
    grid-template-areas:
      "x   y   z"
      "x   y   z";
    -ms-grid-columns: 1fr 70px 1fr 70px 1fr;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-rows: 100px 70px 100px;
    grid-template-rows: repeat(2, 100px);
  }
}

@media (max-width: 400px){
  .grid-2 {
    grid-template-areas:
      "x"
      "x"
      "y"
      "y"
      "z"
      "z";
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 100px 20px 100px 20px 100px 20px 100px 20px 100px 20px 100px;
    grid-template-rows: repeat(6, 100px);
  }
  /* must inherit gap from .grid-2.modifier */
  .grid-2.modifier {
    grid-template-areas:
      "x   y   z"
      "x   y   z";
    -ms-grid-columns: 1fr 70px 1fr 70px 1fr;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-rows: 100px 70px 100px;
    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);
}