.a { grid-template-areas: "head head" "nav main" "nav foot" "another";}
@media (max-width: 1000px) { .a { grid-template-areas: "head main"; }}
.b { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: head;}
.c { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: main;}
.d { -ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-column: 1; grid-area: nav;}
.e { -ms-grid-row: 3; -ms-grid-column: 2; grid-area: foot;}
@media (max-width: 1000px) { .b { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .c { -ms-grid-row: 1; -ms-grid-column: 2; }}
/****************\ CONFLICT TESTS\****************/
.grid { display: -ms-grid; display: grid; grid-template-areas: "a-conflict a-conflict" "b-conflict b-conflict";}
.grid.conflict { display: -ms-grid; display: grid; grid-template-areas: "a-conflict" "b-conflict";}
.a { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: a-conflict;}
.grid.conflict > .a { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1;}
.b { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: b-conflict;}
.grid.conflict > .b { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 1;}
/****************\ MQ CONFLICT TEST\****************/.grid-mq { display: -ms-grid; 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: -ms-grid; display: grid; grid-template-areas: "a-mq" "b-mq";}
@media (min-width: 601px) { .grid.conflict { grid-template-areas: "a-mq b-mq"; }}
.a { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: a-mq;}
.grid.conflict > .a { -ms-grid-row: 1; -ms-grid-column: 1;}
.b { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: b-mq;}
.grid.conflict > .b { -ms-grid-row: 2; -ms-grid-column: 1;}
@media (max-width: 600px) { .a { -ms-grid-row: 1; -ms-grid-column: 1; } .b { -ms-grid-row: 2; -ms-grid-column: 1; }}
@media (min-width: 601px) { .grid.conflict > .a { -ms-grid-row: 1; -ms-grid-column: 1; } .grid.conflict > .b { -ms-grid-row: 1; -ms-grid-column: 2; }}
/*************************\ OVERRIDE CONFLICT TESTS\*************************/
.grid-overide { display: -ms-grid; display: grid; grid-template-areas: "overide";}
.grid-overide > .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: overide;}
.grid-overide .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: overide;}
.grand-parent .mother { display: -ms-grid; display: grid; grid-template-areas: "child";}.grand-parent .father { display: -ms-grid; display: grid; grid-template-areas: "child child";}.grand-parent .father-second { display: -ms-grid; 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 { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child;}.grand-parent .mother > .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child;}
.grand-parent .father .cell { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: child;}.grand-parent .father > .cell { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: child;}
/* emit warning */.uncle .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child;}
/* emit warning */.uncle > .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child;}
/* emit warning */.grand-parent .uncle-second .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child;}
/* emit warning */.grand-parent .uncle-second > .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child;}
/* emit warning */.grand-parent .father.uncle .cell { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: child;}
/* emit warning */.grand-parent.uncle .father > .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child;}
/* must not emit warning */.uncle .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child-unique;}
/* must not emit warning */.uncle > .cell { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: child-unique;}@media (min-width: 600px) { .uncle .cell { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .uncle > .cell { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; }}/*************************\ MULTI SELECTOR TEST\*************************/
.grand-parent .uncle,.grand-parent .aunt { display: -ms-grid; display: grid; grid-template-areas: "cousin";}.grand-parent .uncle .cousin { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: cousin;}.grand-parent .uncle > .cousin { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: cousin;}.grand-parent .aunt .cousin { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: cousin;}.grand-parent .aunt > .cousin { -ms-grid-row: 1; -ms-grid-column: 1; 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: -ms-grid; 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;}
@media (max-width: 767.98px) { .grid-area-first { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .grid-area-second { -ms-grid-row: 2; -ms-grid-column: 1; } .grid-area-third { -ms-grid-row: 2; -ms-grid-column: 2; }}