从2列到1列的响应4盒网格

Question

我是初学者css,我有一点问题.我测试了不同的方法来处理响应式4 div格css,我失败了.

我想响应地将4 divs 排列成grid 2列,如果显示要缩小,它应该浮动到一列布局.

这是响应网格的草图:

Answer 1

这是一个简单的响应式网格,在纯CSS和HTML中有4个div框,当浏览器宽度变小时,它从2到1列排列:

DEMO(调整结果窗口大小以查看效果)

请注意,其max-width上的#container值设置为450px2个块+它们的边距可以在两个colmuns中按宽度拟合.

当寡妇小于450px宽度时,#container适应窗口宽度,并且由于块不再适合,它们会退到一列.

#container {
  text-align: center;
  max-width: 450px;
  margin: 0 auto;
}
.block {
  width: 200px;
  height: 200px;
  margin: 10px;
  display: inline-block;
  background: #00CC99;
}

<div id="container">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>