删除 CSS 网格中的“对齐项”空间 [重复]

Question

我正在尝试使用 CSS Grid 作为 2d 替代方案来填充我正在创建的小型测试博客的空间。我遇到了一个关于定位的小问题。

首先，由于它是一个博客，我不太确定内容将在文章中保留多长时间。因此我不能使用设置定位来修改布局。

我目前的看法是：

但是，我希望视图看起来像：

目前，我的代码结构如下：

CSS

.articles {
    margin: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
}
article {
    align-self: start;
}

HTML

<div class="articles">
    <article>lorem ipsum...</article>
    <article>lorem ipsum...</article>
    <article>lorem ipsum...</article>
</div>

由于较大的（第二）段落，似乎 align-self 正在通过删除空内容来正常工作。然而，第三段保持在其当前的静态位置，而不是移动到现在空白的位置，align-self: stretch 本来应该是。

我不太确定我可以尝试解决这个问题。

Answer 1

CSS Grid 或 Flexbox 可能不是这样的合适选择，但 CSS 列可能是：

body {
  background: #EEE;
}

.articles {
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  column-width: 300px;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  width: 90%;
  max-width: 1100px;
  margin: 30px auto;
}

article {
  margin: 15px 0;
  padding: 15px;
  background: #FFF;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  display: inline-block;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

<div class="articles">
  <article>
    <h2>Article Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </article>
  <article>
    <h2>Article Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis.</p>
  </article>
  <article>
    <h2>Article Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </article>
  <article>
    <h2>Article Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </article>
</div>

Answer 2

这在 CSS Grid 中是不可能的。在 CSS Grid 中，子元素被排列成列和行。您正在寻找的是让它们像列一样排列。可能有一种方法可以单独使用 flexbox 来实现它（如果我弄明白了，我会在此处添加它），但你真正想要的是一个有 2 列的网格，其中每列都是一个 flexbox。

这是不可能的原因是因为行高。 CSS Grid 中没有only 列的概念。当一个元素添加到没有定义行的网格时，网格将自动添加一个auto-row，其高度可以由grid-auto-rows 属性控制（对于列也是如此）。因此，在您添加第一篇文章后，您可以将其视为添加一个刚性行。

Grid 的重点在于它是一个二维布局工具，其中 Flexbox 和普通文档流主要集中在 1 维上（除了少数例外，如浮动）。您可以看到文章的高度将决定它们所在行的高度。

获得这种效果的唯一方法是为有多种尺寸以跨越多行的文章预先定义高度。

正如其他答案所说，这里最好的方法可能是 Flexbox。我不推荐 Columns，因为它有点问题和 not exactly well supported（尽管如果你使用 CSS Grid 可能对你没关系）