弹性盒：
css 网格：
网格布局详细
grid-template-columns: repeat(null, 1fr); grid-template-row: repeat(null, auto); grid-column: 1/3 grid-row: 1/4
行覆盖
repeat(null, minmax(200px 1fr))
自动调整和自动填充
立即学习“前端免费学习笔记（深入）”；
css 网格中的自动填充和自动调整关键字控制当网格项不占用网格容器中的额外空间时网格的行为方式。
自动填充
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
在此示例中，网格将创建容器中能够容纳的尽可能多的 100 像素列。 如果还有剩余空间，它将在各列之间平均分配。
自动调整：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
在此示例中，网格将创建容器中能够容纳的尽可能多的 100 像素列。 如果还有剩余空间，它将在各列之间平均分配，并且任何空列都将被折叠。
子网格
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item {
display: grid;
grid-template-columns: subgrid;
}
注意：-
容器查询
规则：-
规则仅对容器后代有效而不是容器本身
容器大小查询是响应式设计的补充，而不是媒体查询的替代品。
<article class="card"><h2>That's No Moon. It's a Space Station.</h2>
<p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
<p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
</article><!-- we can't query cards in container query so only work with descendants--><!-- Workaround solution would be check below--><div class="card">
<article><h2>That's No Moon. It's a Space Station.</h2>
<p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
<p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
</article>
</div>
.card {
container-name: card;
container-type: inline-size;
}
@container card (min-width: 200px) {
article {
background-color: red;
}
}
@container card (min-width: 250px) {
article {
...
}
}