Question

使用CSS网格，当屏幕变小时，我如何设置三个div来同时换行？

这意味着要离开：

<div class="form-group">
  <label class="control-label col-sm-4" for="email">UOM:</label>
  <div class="col-sm-6">
    <input type="text" class="form-control" required id="email" 
   placeholder=""  name="projectid" ng-model=clientSelected.uom>
  </div>

到此：

+---------+--+---------+--+---------+
|   div   |  |   div   |  |   div   |
+---------+--+---------+--+---------+

没有先完成这个中间步骤：

+-----+
| div |
+-----+
|     |
+-----+
| div |
+-----+
|     |
+-----+
| div |
+-----+

使用该入门代码：

＆＃13;

+---------+--+---------+
|   div   |  |   div   |
+---------+--+---------+
|         |  |         |
+---------+--+---------+
|   div   |  |         |
+---------+--+---------+

＆＃13;

.wrapper {
  display: grid;
  grid-gap: 10px;
}

＆＃13;

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%}}

CSS网格：同时包装三个div

2 个答案: