Question

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

首先，由于它是一个博客，我不太确定文章中的内容会持续多长时间。因此我不能使用set定位来修改布局。

我目前的观点是：

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

目前，我的代码结构为：

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列可能是：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

CSS Grid无法实现这一点。在CSS Grid中，子项被排列为列和行。您正在寻找的是将它们排列为列。可能有一种方法可以单独使用flexbox来实现这一点（如果我弄清楚的话，我会在这里添加它）但实际上你想要的是一个带有2列的网格，其中每列都是一个flexbox。

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

网格的一点是它是一个二维布局工具，其中Flexbox和普通文档流程主要关注一维（除了少数例外，如float）。您可以看到文章的高度将决定它们所包含的行的高度。

获得这样效果的唯一方法是使用预定义的高度来存放多个尺寸以跨越多行的文章。

正如其他答案所说，这里最好的方法可能就是Flexbox。我不建议使用Columns，因为它有点马车和not exactly well supported（但如果你使用的是CSS Grid，那对你来说无关紧要）

删除CSS Grid中的“Align-items”空间

2 个答案: