Question

我想在CSS中实现网格效果，其中元素的大小都相同但高度不同。我希望下面的元素始终位于底部元素的50px，无论下一个是什么。

我尝试使用花车，但那个错误。所以我尝试使用Flex，但它仍然没有做我想要的。

.container
  display: flex
  flex-wrap wrap
  align-content flex-start
  align-items flex-start

我想要的是什么：

我有什么：

Answer 1

尝试新的CSS Grid Layout：

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

grid-column-gap

jsFiddle demo

工作原理：

Establish a block-level grid container.
grid-auto-rows属性设置自动生成的行的高度。在这个网格中，每行高50px。
grid-gap属性是grid-row-gap和flex-wrap: wrap的简写。此规则在网格项之间设置10px间隙。（它不适用于物品和容器之间的区域。）

grid-template-columns属性设置显式定义列的宽度。

repeat表示法定义了重复列（或行）的模式。

auto-fill函数告诉网格尽可能多的列（或行）排列而不会溢出容器。（这可以创建与flex布局flex-grow类似的行为。）

minmax()函数为每列（或行）设置最小和最大大小范围。在上面的代码中，每列的宽度至少为容器的30％，并且最大可用空间。

fr unit表示网格容器中可用空间的一小部分。它与flexbox的{{1}}属性相当。

使用grid-row和span，我们告诉网格项目他们应该跨越多少行。

CSS网格的浏览器支持

Chrome - 完全支持截至2017年3月8日（第57版）

Firefox - 完全支持截至2017年3月6日（第52版）

Safari - 完全支持截至2017年3月26日（版本10.1）

Edge - 截至2017年10月16日（第16版）的全面支持

IE11 - 不支持当前规范;支持过时版本

以下是完整图片：http://caniuse.com/#search=grid
Firefox中的
酷网格覆盖功能： 在Firefox开发工具中，当您检查网格容器时，CSS声明中有一个微小的网格图标。单击它会在页面上显示网格的轮廓。

此处有更多详情：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Answer 2

我建议使用列布局。通过声明column-width和column-count，可以轻松地响应您的喜好。 Emonadeo的解决方案（没有冒犯）的好处是它仍然保持响应，没有添加任何额外的标记。缺点是，元素首先被排序到列中，而不是行。

＆＃13;

.container {
   /* min width of a single column */
   column-width: 140px;
   /* maximum amount of columns */
   column-count: 4;
   /* gap between the columns */
   column-gap: 16px;
}


.container div {
  /* important so a single div never gets distributed between columns */
  break-inside: avoid-column;

  background-color: #2C2F33;
  margin-bottom: 16px;
  color:white;
}

＆＃13;

<div class="container">
    <div style="height: 200px">a</div>
    <div style="height: 100px">b</div>
    <div style="height: 200px">c</div>
    <div style="height: 150px">d</div>
    <div style="height: 250px">e</div>
    <div style="height: 200px">f</div>
    <div style="height: 300px">g</div>
    <div style="height: 150px">h</div>
    <div style="height: 100px">i</div>
</div>

＆＃13;

Answer 3

我建议你将每列放在一个单独的div中。这样，flexbox就不会强迫它进入类似于表格的布局。

即使我在代码段中使用了固定的高度，它也应该动态运行而没有任何问题

＆＃13;

.container {
  display: flex;
}

.col {
  flex: 1;
}

.col div {
  background-color: #2C2F33;
  margin: 16px 8px;
}

＆＃13;

<div class="container">
  <div class="col">
    <div style="height: 200px"></div>
    <div style="height: 100px"></div>
    <div style="height: 200px"></div>
  </div>
  <div class="col">
    <div style="height: 150px"></div>
    <div style="height: 250px"></div>
    <div style="height: 200px"></div>
  </div>
  <div class="col">
    <div style="height: 300px"></div>
    <div style="height: 150px"></div>
    <div style="height: 100px"></div>
  </div>
</div>

＆＃13;

使用flexbox（或其他CSS）创建一个砌体网格

3 个答案:

jsFiddle demo