named-grid-areas-dynamic-with-media-query.html

<!DOCTYPE html>
<html>
<style type="text/css">
.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    grid-template-areas: "one"
                         "two"
                         "three";
}

.one {
    grid-area: one;
    background-color: beige;
}

.two {
    grid-area: two;
    background-color: antiquewhite;
}

.three {
    grid-area: three;
    background-color: bisque;
}

.one, .two, .three { min-height: 100px; }

@media screen and (min-width: 500px) {
    .grid {
       grid-template-columns: 1fr 1fr;
       grid-template-areas: "one one"
                            "two three";
  }
}

@media screen and (min-width: 700px) {
    .grid {
       grid-template-columns: 2fr 1fr 1fr;
       grid-template-areas: "one two three";
    }
}
</style>
</head>
<body>
<p>The test passes if you see 3 blocks bellow arranged on a single row</p>
<div class="grid">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
</body>
</html>

chromium/third_party/blink/web_tests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query.html