使用 CSS 网格，如何在屏幕变小时设置三个 div 的样式以同时换行？
这意味着从这里开始：
+---------+--+---------+--+---------+
| div | | div | | div |
+---------+--+---------+--+---------+
对此：
+-----+
| div |
+-----+
| |
+-----+
| div |
+-----+
| |
+-----+
| div |
+-----+
无需先经过这个中间步骤：
+---------+--+---------+
| div | | div |
+---------+--+---------+
| | | |
+---------+--+---------+
| div | | |
+---------+--+---------+
使用该入门代码：
.wrapper {
display: grid;
grid-gap: 10px;
}<div class="wrapper">
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>
</div>使用媒体查询将列数从三切换为一。
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
@media ( max-width: 500px ) {
.wrapper {
grid-template-columns: 1fr;
}
}
.box {
background-color: lightgreen;
}<div class="wrapper">
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句