grid-area-media-sequence.out.css

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