具有对齐列的流体网格（HTML，CSS）

Question

我试图创建一个大小相同的网格，这些网格总是占据容器的整个宽度，同时保持垂直对齐。一种方法是根据容器宽度计算宽度和边距，但在某种程度上，这样做会感觉很笨拙。事实证明，使用flexbox解决方案也很难扩展框以占据整个宽度，并保持最后一行与其他行对齐，即使它的元素较少。

如果有人想玩，我也会从一个小的JSFiddle开始。 Fiddle

'

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

this solution是什么？

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  height: 3em;
  width: 7em;
  margin: 0.1em;
  background-color: lightgray;
  flex: 0 0 auto;
}

<div 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>