如何使用css建立4×4网格？

Question

使用CSS创建4×4网格(4行和4列)的正确方法是什么？

我已经尝试过使用列计数，但可以获得网格的完整外观，边框不能正确延伸到元素。

我们还有别的办法吗。如果是的话请帮忙

以下是代码

​

#container {
  width: 300px;
  column-count: 4;
  background: green;
  border: 1px solid;
  column-rule: 1px solid;
}
.box {
  color: blue;
  border-bottom: 1px solid;
}
.box .contents {
  visibility: hidden;
  width: 100px;
}

<div id="container">
  <div class="box">c-1
    <p class="contents"></p>
  </div>
  <div class="box">c-2

    <p class="contents"></p>
  </div>
  <div class="box">c-3

    <p class="contents"></p>
  </div>
  <div class="box">c-4

    <p class="contents"></p>
  </div>

  <div class="box">c-5

    <p class="contents"></p>
  </div>
  <div class="box">c-6

    <p class="contents"></p>
  </div>
  <div class="box">c-7

    <p class="contents"></p>
  </div>
  <div class="box">c-8

    <p class="contents"></p>
  </div>

  <div class="box">c-9

    <p class="contents"></p>
  </div>
  <div class="box">c-10

    <p class="contents"></p>
  </div>
  <div class="box">c-11

    <p class="contents"></p>
  </div>
  <div class="box">c-12

    <p class="contents"></p>
  </div>

  <div class="box">c-13

    <p class="contents"></p>
  </div>
  <div class="box">c-14

    <p class="contents"></p>
  </div>
  <div class="box">c-15

    <p class="contents"></p>
  </div>
  <div class="box">c-16

    <p class="contents"></p>
  </div>
</div>

​

谢谢

Answer 1

那是行不通的，不。查看div元素的网格类型排列，请查看flex-box或float。Flexbox特别强大，实际上只需要2-3行CSS就可以完成这个任务：

* { box-sizing: border-box; }
#container { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; background: green; }

#container > div { width: 25%; height: 25vw; border: white 1px solid; }

发生了什么：

框大小-取决于您在哪个浏览器上，1 1px边框将增加整个宽度并打破网格(例如:100 1px框的25%是25 1px，但是如果您的框大小关闭，边框会导致框“膨胀”到27 1px。如果每个框是27 it，其中一个框将被敲到bc的下一行，它上面的行没有任何空间)。

通过将其设置为边框，这意味着我们在指定DOM的宽度时包括边框。

宽度和高度: 25%用于宽度，而不是高度，因此我们使用大众度量来指定高度。注意这个单元，它不支持当前版本-1 (谢谢IE)。

弹性-所有的简洁的方式来接近现代的CSS布局。有很多钟声和口哨，但总的来说，我认为我上面使用的规则是非常清楚的。我很高兴在评论中提供任何澄清。

鲱鱼/cg71okst/