CSS网格：同时包装三个div

Question

使用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>

https://jsfiddle.net/jLz0aqmj/1/

Answer 1

使用媒体查询将列数从三个切换为一个。

revised jsFiddle demo

.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>

Answer 2

你好检查以下小提琴

https://jsfiddle.net/jLz0aqmj/8/

    <div class="wrapper">
  <div class="box">box 1</div>
  <div class="box">box 2</div>
  <div class="box">box 3</div>
</div>

和css

.wrapper{max-width:600px; font-size:0;}
.box{display:inline-block; max-width:200px; width:33%; font-size:13px; background:#ccc;}
@media screen and (max-width: 600px) {.box{display:block; max-width:100%}}