.grid-template-sequence { display: -ms-grid; display: grid; -ms-grid-rows: auto auto auto; -ms-grid-columns: 1fr 1fr; grid-template: "foo foo" "bar bar" "baz baz" / 1fr 1fr;}
@media (min-width: 300px) { .grid-template-sequence { -ms-grid-rows: auto 20px; -ms-grid-columns: 1fr 1fr; grid-template: "foo foo" "bar bar" 20px / 1fr 1fr; }}
@media (min-width: 600px) { .grid-template-sequence { -ms-grid-rows: auto 20px; -ms-grid-columns: 1fr 1fr; grid-template: "foo foo" "bar bar" 20px / 1fr 1fr; }}
@media (min-width: 900px) { .grid-template-sequence { -ms-grid-rows: auto auto 20px; -ms-grid-columns: 1fr 1fr; grid-template: "x x" "foo foo" "bar bar" 20px / 1fr 1fr; }}
.foo { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: foo;}
.bar { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: bar;}
.x { grid-area: x;}
@media (min-width: 300px) { .foo { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .bar { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; }}
@media (min-width: 600px) { .foo { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; } .bar { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; }}
@media (min-width: 900px) { .foo { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .bar { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 2; } .x { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; }}
@media (max-width: 900px) { .grid-2 { -ms-grid-rows: auto auto 20px; -ms-grid-columns: 1fr 1fr; grid-template: "a a" "a a" "b b" 20px / 1fr 1fr; }}
@media (max-width: 400px) { .grid-2 { -ms-grid-rows: auto auto 20px; -ms-grid-columns: 1fr 1fr; grid-template: "a a" "a a" "b b" 20px / 1fr 1fr; }}