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