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

.b {
  grid-area: head;
}

.c {
  grid-area: main;
}

.d {
  grid-area: nav;
}

.e {
  grid-area: foot;
}

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

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

.a-shortcut {
  grid-gap: 1rem 2rem;
  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 {
  grid-area: head-shortcut;
}

.c-shortcut {
  grid-area: main-shortcut;
}

.d-shortcut {
  grid-area: nav-shortcut;
}

.e-shortcut {
  grid-area: foot-shortcut;
}

.f-shortcut {
  grid-gap: 10px;
  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: grid;
  grid-template:
    "a   b" 100px
    "c   d" 100px
    "e   f" 100px /
    1fr  1fr;
}

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

.grid-2 {
  display: grid;
  grid-gap: 50px;
  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";
  grid-template-columns: repeat(2, 1fr);
  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";
  grid-template-columns: repeat(2, 1fr);
  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";
  grid-template-columns: repeat(2, 1fr);
  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";
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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

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

@media (min-width: 700px){
  .grid {
    grid-gap: 20px;
    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-template-areas:
      "a   b   c   d   e   f";
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 100px;
  }
}

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

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

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

@media (max-width: 700px){
  .grid-2 {
    grid-template-areas:
      "x   x   y   y   z   z";
    grid-template-columns: repeat(6, 1fr);
    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";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
  }
}

@media (max-width: 400px){
  .grid-2 {
    grid-template-areas:
      "x"
      "x"
      "y"
      "y"
      "z"
      "z";
    grid-template-columns: 1fr;
    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";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
  }
}