适当使用 CSS Grid（再探讨）

本文最初发表于silvestar.codes。

本文是对我去年发表的文章《在适当情况下使用 CSS Grid》的后续文章。目标是找到一种处理项目数量未知情况下的导航解决方案。

概要

使用 CSS Grid 创建导航可能并非最佳方案。但是，如果确实需要使用 CSS Grid，则有两种选择：

• 将grid-auto-flow: row;每个项目依次放入网格中，如下所示：

.nav__item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}

• 使用关键字 auto 设置行宽和列宽，从而定义一个固定的网格：

.nav {
  display: grid;
  grid-auto-flow: row;
}
@media screen and (min-width: 320px) {
  .nav {
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
  }
}

在这两个例子中，我们都定义了一个严格的网格——一行中的列数是严格定义的。

https://codepen.io/CiTA/pen/dzogLV

新的解决方案

我使用 CSS Grid 已经一年多了，在此过程中我学会了如何正确使用它的各项功能：

• minmax()功能，
• auto-fit关键词，
• grid-auto-flow财产，以及
• 如何避免媒体问询🎊。

代码

我已对之前的方案进行了分支，并添加了上述功能。以下是最终方案。

https://codepen.io/CiTA/pen/pOgGqv

.nav--grid2 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(60px, auto));
  justify-content: center;
}

让我们来分析一下这段代码。

minmax()

minmax()该函数将大小定义为最小值和最大值之间的范围。它允许动态定义列和行的大小。

我们可以使用此属性来定义导航项的最小和最大宽度。在我们的示例中，我们使用以下 minmax 定义：

minmax(60px, auto)

我们建议列宽至少为 60 像素，并且应与内容的最大宽度相同。更多详情请参阅auto关键字。

自动适配

auto-fit应该用作重复次数——一个在repeat()函数中使用的数字。它的意思是，当网格为空时，网格应该尽可能多地放置项目（我想是这样🤔）。

网格自动流

grid-auto-flow这是一个控制网格算法如何放置项目的属性。在我们的示例中，我们使用dense关键字。它表示当出现较大的网格项目时，网格应该填充可能留下的空隙。

正当内容

justify-content该属性用于对齐框的内容。我们用它justify-content: center来将项目的内容居中对齐。

额外福利：无需媒体问询

正如你所看到的，我们没有使用媒体查询。媒体查询非常有用，没有它们，就不会有响应式网页设计，但能够不用媒体查询就实现响应式行为，这种感觉真的很有成就感。

最后想说的

CSS Grid 可能仍然不是导航元素的最佳方案，但它确实有效。即使它无法解决你的问题，也应该尽可能在合适的地方使用 CSS Grid。如果你特立独行，可以忽略这一点，仍然使用它——只要用户满意，构建 Web 解决方案就没有规则可言。😎