CSS Grid を使ったグリッドレイアウト（12列のグリッド）の例
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum blanditiis incidunt, labore totam consequatur cupiditate! Explicabo beatae, quam, nulla eius voluptatum aspernatur adipisci repellat dolor labore perspiciatis, consectetur unde nobis.
Vero a fuga aspernatur veniam assumenda explicabo porro error dolores sunt consequatur! Ex, perferendis aspernatur vero distinctio. Dolor itaque repellat hic asperiores aperiam exercitationem, aut labore provident architecto voluptatem excepturi
Doloribus, asperiores iure dolore necessitatibus ea voluptate, vero voluptates quasi praesentium? Est, molestias?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Sample</title>
<style>
body {
width: 95%;
max-width: 960px;
margin: 2em auto;
}
.header, .footer, .article, .aside {
padding: 10px;
}
.header {
background-color: #CEECF5;
}
.article {
background-color: #D8F7DE;
}
.aside {
background-color: #F6F7CC;
}
.footer {
background-color: #F6C2C3;
}
@media (min-width: 40em) {
.container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 20px;
}
.header {
grid-column: 1 / 13;
grid-row: 1;
}
.article {
grid-column: 4 / 13;
grid-row: 2;
}
.aside {
grid-column: 1 / 4;
grid-row: 2;
}
.footer {
grid-column: 1 / 13;
grid-row: 3;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="article">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum blanditiis incidunt, labore totam consequatur cupiditate! Explicabo beatae, quam, nulla eius voluptatum aspernatur adipisci repellat dolor labore perspiciatis, consectetur unde nobis.</p>
<p>Vero a fuga aspernatur veniam assumenda explicabo porro error dolores sunt consequatur! Ex, perferendis aspernatur vero distinctio. Dolor itaque repellat hic asperiores aperiam exercitationem, aut labore provident architecto voluptatem excepturi</p>
</div>
<div class="aside">
<h3>Aside</h3>
<p>Doloribus, asperiores iure dolore necessitatibus ea voluptate, vero voluptates quasi praesentium? Est, molestias? </p>
</div>
<div class="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>