.a { grid-template-areas: "head head" "nav main" "nav foot" "another";}
@media (max-width: 1000px) { .a { grid-template-areas: "head main"; }}
.b { grid-area: head;}
.c { grid-area: main;}
.d { grid-area: nav;}
.e { grid-area: foot;}
/****************\ CONFLICT TESTS\****************/
.grid { display: grid; grid-template-areas: "a-conflict a-conflict" "b-conflict b-conflict";}
.grid.conflict { display: grid; grid-template-areas: "a-conflict" "b-conflict";}
.a { grid-area: a-conflict;}
.b { grid-area: b-conflict;}
/****************\ MQ CONFLICT TEST\****************/.grid-mq { display: grid; grid-template-areas: "a-mq b-mq";}
@media (max-width: 600px) { .grid-mq { grid-template-areas: "a-mq" "b-mq"; }}
.grid.conflict { display: grid; grid-template-areas: "a-mq" "b-mq";}
@media (min-width: 601px) { .grid.conflict { grid-template-areas: "a-mq b-mq"; }}
.a { grid-area: a-mq;}
.b { grid-area: b-mq;}
/*************************\ OVERRIDE CONFLICT TESTS\*************************/
.grid-overide { display: grid; grid-template-areas: "overide";}
.grid-overide > .cell { grid-area: overide;}
.grid-overide .cell { grid-area: overide;}
.grand-parent .mother { display: grid; grid-template-areas: "child";}.grand-parent .father { display: grid; grid-template-areas: "child child";}.grand-parent .father-second { display: grid; grid-template-areas: "child-unique";}@media (min-width: 600px) { .grand-parent .father-second { grid-template-areas: "child-unique child-unique"; }}.grand-parent .mother .cell { grid-area: child;}.grand-parent .mother > .cell { grid-area: child;}
.grand-parent .father .cell { grid-area: child;}.grand-parent .father > .cell { grid-area: child;}
/* emit warning */.uncle .cell { grid-area: child;}
/* emit warning */.uncle > .cell { grid-area: child;}
/* emit warning */.grand-parent .uncle-second .cell { grid-area: child;}
/* emit warning */.grand-parent .uncle-second > .cell { grid-area: child;}
/* emit warning */.grand-parent .father.uncle .cell { grid-area: child;}
/* emit warning */.grand-parent.uncle .father > .cell { grid-area: child;}
/* must not emit warning */.uncle .cell { grid-area: child-unique;}
/* must not emit warning */.uncle > .cell { grid-area: child-unique;}/*************************\ MULTI SELECTOR TEST\*************************/
.grand-parent .uncle,.grand-parent .aunt { display: grid; grid-template-areas: "cousin";}.grand-parent .uncle .cousin { grid-area: cousin;}.grand-parent .uncle > .cousin { grid-area: cousin;}.grand-parent .aunt .cousin { grid-area: cousin;}.grand-parent .aunt > .cousin { grid-area: cousin;}
/*************************\ CONTROL COMMENTS TEST\*************************/
/* must not add prefixes */.uncle .cell { /* autoprefixer: off */ grid-area: child;}
/* must not add prefixes */.uncle .cell { /* autoprefixer: ignore next */ grid-area: child;}
.grid-example { display: grid;}
@media (max-width: 767.98px) { .grid-example { grid-template-areas: 'first first' 'second third'; }}
.grid-area-first { grid-area: first;} .grid-area-second { grid-area: second;}
.grid-area-third { grid-area: third;}