使用CSS Grid Layout，我创建了一个站点，其布局会随着屏幕尺寸的变化而有所变化。
在这里，为了将内容（粉红色区域）保留在CSS Grid Layout的中央，我进行了以下样式设置。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
color: #fff;
}
.bg {
background-color: #6c757d;
}
footer {
width: 100%;
display: grid;
grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
grid-template-rows: repeat(3, auto);
}
h1,
dl {
grid-column: 2;
background-color: pink;
}
p.h6 {
grid-row: 3;
grid-column: 3;
overflow-wrap: break-word;
}
@media (max-width: 800px) {
p.h6 {
grid-column: 2;
}
}
body>p {
text-align: center;
}<footer class="bg text">
<h1>
heading
</h1>
<dl …