56 lines
1018 B
HTML
56 lines
1018 B
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>
|