html - CSS 网格 : wrap three divs simultaneously

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>