CSS网格：如何将同一网格区域中的元素对齐？答案

【问题标题】：CSS grid: how to bring elements in same grid area to line up?CSS网格：如何将同一网格区域中的元素对齐？
【发布时间】：2017-03-09 07:48:53
【问题描述】：

我的目标是使用 CSS 网格布局进行两列砌体布局。给定一个带有子元素的元素：

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

让孩子们将自己交替排列成列。我的想法是有两个网格区域left 和right 并告诉孩子们分成它们：

section {
  display: grid;
  grid-template-areas: "left right";
}

div:nth-child(odd) {
  grid-area: left;
}

div:nth-child(even) {
  grid-area: right;
}

这是一个说明我当前状态的 JSBin：https://jsbin.com/zaduruv/edit?html,css,output

不幸的是，这些元素的反应与设置了position:absolute 完全相同。也就是说，它们都挤向顶部并相互重叠。

CSS 网格布局属性是否有可能让孩子在列中排队，就像他们通常使用position: static 所做的那样？

【问题讨论】：

你看过css-tricks.com/snippets/css/complete-guide-grid吗？
我尝试使用 flexbox 解决这个问题：https://jsbin.com/tujuzumaca/edit?html,css,output 唯一需要确保的不是给 DIV 提供固定高度，而是让它根据内容自行获取高度。
@Winter 我实际上在一小时前的答案中链接到该页面；-) stackoverflow.com/questions/21588420/…
@ANshulSharma 我认为我们彼此误解了。其目的是让那些根据其内容具有不同高度的盒子，一个一个地平齐放置，没有间隙。我也用 flexbox 解决了这个问题，使用flex-direction: column，但它有一个缺点，我需要在section 上设置一个固定的高度，否则孩子们不会换到第二列。因此我的想法是尝试使用网格布局。
可能的指导：stackoverflow.com/q/34480760/3597276

标签： css layout masonry css-grid

【解决方案1】：

你不能。由于元素可以在 CSS 网格中相互重叠，因此它甚至不会尝试对齐它们。顾名思义，它是一个网格，而不是列布局。

更好的解决方案是使用CSS multi-column 布局，如下面的sn-p。

多列布局的唯一问题是，它垂直而不是水平分布 div，所以你得到这个：

1 4 2 5 3 6

而不是这个：

1 2 3 4 5 6

section {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    width: 500px;
    background-color: #e0e0e0;
}

div {
  width: 250px;
  display: inline-block;
}

div:nth-child(1) {
  background-color: #c1c0c1;
  height: 100px;
}

div:nth-child(2) {
  background-color: #fedbc1;
  height: 50px;
}

div:nth-child(3) {
  background-color: #dec34a;
  height: 130px;
}

div:nth-child(4) {
  background-color: #ce3294;
  height: 110px;
}

div:nth-child(5) {
  background-color: #99deac;
  height: 80px;
}

div:nth-child(6) {
  background-color: #aade34;
  height: 190px;
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

【讨论】：

感谢您的回答！是的，我怀疑这不是网格的范围来做这样的事情。我也尝试了 CSS 列，但遇到了问题，浏览器会忽略孩子的 break-inside: avoid，并将孩子的内容涂抹在两列上。
我现在倾向于放弃，添加两个包装元素并手动对其中的子元素进行排序。或者让好的 ol' Masonry.js 恢复原状。

【解决方案2】：

你必须放弃这个网格区域并使用 grid-column-start。否则所有东西都将放在同一个区域。 https://jsbin.com/peqiwodoba/edit?html,css,output

div:nth-child(odd) {
}

div:nth-child(even) {
  grid-column-start: 2;
}

【讨论】：