.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;}