Grid 的密集关键字带来的自动流式布局能力

假设我们正在制作一个新闻网站的首页。 您可能习惯于在网格布局中看到一些基于卡片的内容，对吧？ 这是一个经典的例子，纽约时报

是的，类似这样的。

有些卡片/元素/盒子/无论什么都需要占用比其他元素更多的空间。 特色文章就让人想到这一点。

CSS Grid 在这里非常理想，因为我们同时处理两个方向：行和列。 此外，它还具有内置的功能，可以根据可用空间自动将项目放置在网格上。 如果我们只是在父元素上定义网格，而没有其他操作，则每个子元素将根据列和行上可用的空间分配相等的空间。

换句话说，我们无需严格或明确地指定网格在何处放置项目。

报纸网站可以真正从这一点中获益。 页面上的文章数量可能会有所不同。 也许在某些情况下会显示广告，而在其他情况下则不会显示。 即使内容不可预测，CSS Grid 也可以通过自动将项目排列到位来使布局可预测。

如果有九个故事完美地契合，那就太好了，但也许有一天我们只有八个。 哦，好吧，CSS Grid 可以确保项目均匀地流入单元格。

当我们有跨越多行或多列的项目时，事情可能会变得有点棘手。 让我们回到特色文章的想法，并规定它应该跨越一行中的最后两列。

.article--featured {
  grid-column: 2 / span 2;
}

有一天我们可能只有六篇文章，因为，同样，我们的内容有点不可预测。

<div class="articles">
  <div class="article">1</div>
  <div class="article">2</div>
  <div class="article">3</div>
  <div class="article--featured">4</div>
  <div class="article">5</div>
  <div class="article">6</div>
</div>

不用担心！ 我们希望 Grid 的自动放置功能可以帮助我们解决特色文章的问题。 但是，当我们将特色文章放在那里时，我们会得到以下结果

嗯，这不是我们想要的。 如果五个文章围绕特色文章流动，那就好多了。

实际上发生的事情是，**Grid 获取特色文章的显式放置，并将其放置在有足够可用空间供其占据第二和第三列的位置，在源代码中位于它之前的文章之后。 碰巧是在第二行，并且碰巧在它前面有一个空位，因为在 HTML 中没有其他文章位于它前面。 Grid 会按照指示放置特色文章，并相应地排列其余项目。**

我们可以强制 Grid 忽略源顺序，并围绕它流动下一个可用项目，即使它在 HTML 中位于特色文章之后。

拥有如此强大功能的魔力是什么？auto-flow: dense！

.articles {
  display: grid;
  grid-auto-flow: dense;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 1fr);
}

就是这样！ 现在我们可以放心，无论向网格中添加多少内容，我们的布局都能保持完整。