如何让 div 填满整个屏幕（砌体/Pinterest）布局

Question

两个问题：

1) 为什么我的 div 中的列不会填满页面（占用空白）而不是溢出到下一列？ （运行代码sn-p时点击查看整页。）

2) 如何使列更具响应性？ （即，当我更改屏幕尺寸时，让列放大和缩小，而不是向左缩小每一列或向右拉伸）。

#container {
  /*min-height: 100vh;*/
  /*min-width: 100vw;*/
  grid-gap: 10px;
}

.columns {
  -moz-column-count: 5;
  -moz-column-gap: 1em;
  -moz-column-width: 40%;
  -webkit-column-count: 5;
  -webkit-column-gap: 1em;
  -webkit-column-width: 40%;
  column-count: 5;
  column-gap: 1em;
  column-width: 40%;
}

.box {
  margin-bottom: 10px;
}

.box.one {
  height: 230px;
  background-color: grey;
}

.box.two {
  height: 230px;
  background-color: grey;
}

.box.three {
  background-color: pink;
  height: 230px;
}

.box.four {
  background-color: grey;
  height: 180px;
}

.box.five {
  background-color: orange;
  height: 170px;
}

.box.six {
  background-color: grey;
  height: 180px;
}

.box.seven {
  background-color: grey;
  height: 200px;
}

.box.eight {
  background-color: blue;
  height: 200px;
}

.box.nine {
  background-color: grey;
  height: 200px;
}

.box.ten {
  background-color: green;
  height: 200px;
}

.box.eleven {
  background-color: grey;
  height: 200px;
}

.box.twelve {
  background-color: grey;
  height: 200px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<div id="container" class="columns">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
  <div class="box five">5</div>
  <div class="box six">6</div>
  <div class="box seven">7</div>
  <div class="box eight">8</div>
  <div class="box nine">9</div>
  <div class="box ten">10</div>
  <div class="box eleven">11</div>
  <div class="box twelve">12</div>
</div>

我正在尝试制作像 Pinterest 这样的登录/登陆页面。这是codepen。

我尝试修改最大/最小高度/宽度并将其设置为 100%、100px、100vh/vw，但似乎没有任何效果。

我做错了什么？请帮忙，谢谢！

Answer 1

在根据屏幕大小使其响应方面，您需要添加一个媒体查询，例如：

@media(max-width:700px){
}

这将做的是检测屏幕宽度何时为 700 像素或更小，并且在这种情况下，您只需将您希望网站的外观放入其中。因此，例如，如果自然地，您在计算机上有一个 div 是半宽，您会这样做：

div {
    width: 50%;
}

那么，如果您在手机屏幕上并且想要使该 div 全宽，您只需添加：

div {
    width: 50%;
}
@media(max-width:600px) {
    div {
         width: 100%;
    }
}

它会相应地改变，希望这会有所帮助！