grid-template.css

.a {
  grid-template: 10px repeat(4, 250px 10px) 20px / auto 1fr;
}

.b {
  grid-template:
      [header-left] "head head" 30px [header-right]
      [main-left]   "nav  main" 1fr  [main-right]
      [footer-left] "nav  foot" 30px [footer-right]
      / 120px repeat(4, 250px 10px);
}

@media (min-width: 1000px) {
  .b {
    grid-template:
        [header-left] "head" 30px [header-right]
        [nav-left]    "nav"  auto  [nav-right]
        [main-left]   "main" 1fr  [main-right]
        [footer-left] "foot" 30px [footer-right]
        / 1fr;
  }
}

.c {
  grid-template:
      "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
      "sd sd sd mn mn mn mn mn mn" minmax(100px, auto)
      "ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
              / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.d {
  grid-template: 10px / 200px;
}

.e {
  grid-template: 10px;
}

.f {
  grid-template:
      "head head"
      "nav main" 20px
      "nav foot"
      / 1fr 1fr;
}

.head {
  grid-area: head;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.foot {
  grid-area: foot;
}

.hd {
  grid-area: hd;
}

.sd {
  grid-area: sd;
}

.mn {
  grid-area: mn;
}

.ft {
  grid-area: ft;
}

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

@media (min-width: 600px){
  .grid {
    grid-gap: 10px;
    grid-template:
        "a   b   c" 100px
        "d   e   f" 100px /
        1fr 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;
}

.g {
  display: grid;
  grid-gap: 10px;
  grid-template:
      "g   g" 100px
      "g   g" 100px
      "h   h" 100px /
      1fr  1fr;
}

/* Should trigger a warning */
.g-conflict {
  display: grid;
  grid-gap: 10px;
  grid-template:
      "g   g" 100px
      "g   g" 100px
      "h   h" 100px /
      1fr  1fr;
}

@media (min-width: 600px) {
  /* This should *not* trigger a warning */
  .g {
    display: grid;
    grid-gap: 10px;
    grid-template:
        "g   h" 100px /
        1fr  1fr;
  }

  /* This *should* trigger a warning */
  .g-conflict-2 {
    display: grid;
    grid-gap: 10px;
    grid-template:
        "g   h" 100px /
        1fr  1fr;
  }
}

/* comma list tests */
/* None of these should throw any warnings (unless specified) */
.i, .j {
  display: grid;
  grid-gap: 10px;
  grid-template:
      "i    j" 100px /
      1fr  1fr;
}

@media (max-width: 600px) {
  .i {
    grid-template:
      "i" 100px
      "j" 100px /
      1fr;
  }
  .j {
    grid-template:
      "i" 100px
      "j" 100px /
      1fr;
  }

  /* This one should throw a warning */
  .k {
    grid-template:
      "i" 100px
      "j" 100px /
      1fr;
  }
}

@media (min-width: 900px) {
  .i, .j {
    display: grid;
    grid-gap: 10px;
    grid-template:
      "i" 100px
      "j" 100px /
      1fr;
  }
}

/* media query test */
@media (min-width: 601px) {
  .l {
    display: grid;
    grid-gap: 10px;
    grid-template:
        "l   m" 100px /
        1fr  1fr;
  }
}

@media (max-width: 600px) {
  .l {
    display: grid;
    grid-gap: 10px;
    grid-template:
        "l   m" 100px /
        1fr  1fr;
  }

  /* this should display a warning */
  .m {
    display: grid;
    grid-gap: 10px;
    grid-template:
        "m   z" 100px /
        1fr  1fr;
  }

  /* this should display a warning */
  .z, .second-z {
    display: grid;
    grid-gap: 10px;
    grid-template:
        ".   z" 100px /
        1fr  1fr;
  }
}

.k-1 {
  grid-area: g;
}

.k-2 {
  grid-area: h;
}

.k-3 {
  grid-area: i;
}

.k-4 {
  grid-area: j;
}

.k-5 {
  grid-area: l;
}

.k-6, .k-7 {
  grid-area: m;
}

.k-8, .k-9 {
  grid-area: z;
}