html - 具有对齐列的流体网格(HTML、CSS)

Question

我正在尝试创建一个由大小相同的框组成的网格，这些框始终占据容器的整个宽度，同时保持垂直对齐。一种方法是根据容器宽度计算宽度和边距，但在某种程度上这样做感觉很笨拙。事实证明，使用 flexbox 解决方案也很困难，既要扩展盒子以占据整个宽度，又要保持最后一行与其他行对齐，即使其中的元素较少也是如此。

我还制作了一个小的 JSFiddle，如果有人想玩的话，可以从中开始。 Fiddle

'

Answer 1

我会尝试使用列而不是 flexbox...

.container {
    width:100%;
  column-count:999;
  column-width:7em;
  column-gap: 0.1em;
}

.box {
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
  height: 3em;
  width: 100%;
  margin-bottom: 0.1em;
  background-color: lightgray;
}

<div id="containerId" class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>