[Grid 网格布局教程]显式网格和隐式网格之间的区别

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

小编注：了解创建隐式网格线和隐式轨迹的原因和方式对于使用网格布局至关重要。

Grid(网格) 布局最终使我们能够在CSS中定义网格，并将网格项放置到网格单元格中。这本身就很棒，但事实上我们不需要指定每个网格轨道，也不必手动放置每一个网格项。因为 Grid(网格) 布局足够灵活，可以适应它们的网格项。

这些都由所谓的显式和隐式网格来处理的。

这篇文章中所有代码示例都附有图片，以显示网格线和轨道。 如果你想自己修改代码，我建议你下载 Firefox Nightly ，因为它目前有调试网格最好的 DevTools 。

显式的 Grid(网格)

我们可以使用 grid-template-rows ， grid-template-columns 和 grid-template-areas 属性来定义形成网格的固定数量的网格线和网格轨道。这种手动定义的 Grid 称为显式网格。

具有4个垂直轨道（列）和2个水平轨道（行）的显式网格。 在 CodePen 中查看

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 20px;
}

重复轨道

当我们定义 grid-template-columns: 1fr 1fr 1fr 1fr; 时，我们得到 4 条垂直轨道，每条轨道的宽度为 1fr 。 我们可以通过使用 repeat() 表示法来自动化，如 grid-template-columns: repeat(4, 1fr); 。第一个参数指定重复次数，第二个参数指定轨道列表。

轨道列表？ 是的，你实际上可以重复多个轨道。例如和上面代码等价的代码： grid-template-columns: repeat(2, 1fr 1fr); 。

See the Pen CSS Grid Layout: Repeating track lists by Manuel Matuzovic ( @matuzo ) on CodePen .0

自动重复轨道

一个带有 4 个垂直轨道的显式网格，每个 100px 宽，由重复表示法生成。 在 CodePen 中查看

repeat() 函数非常有用，但它可以进一步自动化。我们可以使用 auto-fill 和 auto-fit 关键字，来替代设置固定数量的重复。

自动填充轨道（auto-fill）

auto-fill 关键字创建适合网格容器的轨道数，而不会导致网格溢出。

重复放入宽度为 100px 的垂直轨道，以适应网格容器。 在 CodePen 中查看

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 20px;
}

注意： repeat(auto-fill, 1fr); 只会创建一个轨道，因为宽度为 1fr 的单个轨道已经填满了整个网格容器。

自动调整轨道（auto-fit）

auto-fit 关键字的行为与 auto-fill 相同，只是在网格项目放置后，它只会根据需要创建任意数量的轨道，并且任何空的重复轨道都会折叠在一起。

auto-fit关键词与auto-fill有点类似，只是在网格项放置之后，它只会在需要时创建尽可能多的轨道，而重复的空轨道会堆叠在一起（合并）。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-gap: 20px;
}

上例的代码，使用 repeat(auto-fit, 100px); 和 repeat(4, 100px) 创建的网格看上去相同。当有超过4个网格项时，就可以看到差异了。

如果有更多网格项，则 auto-fit 会创建更多列。

在 repeat() 中使用 auto-fit 关键词可根据需要创建尽可能多的轨道，并将轨道尽可能多地放入网格容器中。 在 CodePen 中查看

另一方面，如果在 repeat() 中使用固定数量的垂直轨道，并且网格项数超过该值，则添加更多行。您可以在下一节中阅读更多相关内容：隐式网格。

如果网格项多于垂直轨道，则会添加更多行。 在 CodePen 中查看

为方便起见，我在上面的示例中使用了 grid-template-columns ，但所有规则也适用于 grid-template-rows 。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  grid-gap: 20px;
  height: 100%;
}

html, body {
  height: 100%;
}

在两个轴(行和列)上使用 auto-fill 关键字重复表示法。 在 CodePen 中查看

隐式的 Grid(网格)

如果网格项的数量多于网格单元格，或者网格项位于显式网格外部，则网格容器会通过向网格添加网格线自动生成网格轨道。 显式网格与这些额外的隐式轨道和网格线线一起形成所谓的隐式网格。

两个网格项放置在显式网格之外，导致创建隐式网格线条和网格轨道。 在 CodePen 中查看

.item:first-child {
  grid-column-start: -1;
}

.item:nth-child(2) {
  grid-row-start: 4;
}

隐式轨道的宽度和高度是自动设置。它们的大小足以适合放置的网格项，但可以更改其默认行为。

调整隐式轨道

grid-auto-rows 和 grid-auto-columns 属性使我们可以控制隐式轨道的大小。

display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px;
  grid-gap: 20px;
  grid-auto-columns: 200px;
  grid-auto-rows: 60px;

无论网格项是否适合，隐式轨道现在总是具有 200px 的宽度和 60px 的高度。

固定宽度和高度的隐式轨道。 在 CodePen 中查看

通过使用 minmax() 函数来指定范围，可以使调整隐式轨道更灵活。

js

.grid {

grid-auto-columns: minmax(200px, auto);

grid-auto-rows: minmax(60px, auto);

}

隐式轨道现在至少有 200px 宽和 60px 高，但如果内容需要它将会扩展。

将网格扩展到开始

隐式轨道可能不仅仅被添加到显式网格的末尾。也可能扩展到显式网格的开始处。

一个隐式网格，由一行和一列扩展到开头 在 CodePen 中查看

.item:first-child {
  grid-row-end: 2;
  grid-row-start: span 2;
}

.item:nth-child(2) {
  grid-column-end: 2;
  grid-column-start: span 2;
}

每个网格项在第二行结束，并跨越2个单元格（一个垂直，另一个水平）。 由于在第二行之前只有一个单元，因此在每一侧的开始处将另一个隐式轨道添加到网格中。

自动放置

如前所述，如果项目数超过单元格数，也会添加隐式轨道。 默认情况下，自动放置算法通过连续填充每一行来放置网格项，并根据需要添加新行。 我们可以使用 grid-auto-flow 属性来指定如何把网格项自动放置到网格容器。

如果网格项数超过单元格数量，则添加新列而不是行。 在 CodePen 中查看

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px;
  grid-gap: 20px;
  grid-auto-flow: column;
}

使用网格项填充列，不是填充行，并创建其他隐式列。

未定义显式网格

由于可以使用 grid-auto-rows 和 grid-auto-columns 自动调整单元格大小，因此不必定义显式网格。

没有显式行和轨道的隐式网格。 在 CodePen 中查看

.grid {
  display: grid;
  grid-auto-columns: minmax(60px, 200px);
  grid-auto-rows: 60px;
  grid-gap: 20px;
}

.item:first-child {
  grid-row: span 2;
}

.item:nth-child(2) {
  grid-column: 1 / span 2;
}

.item:nth-child(5) {
  grid-column: 3;
}

完全依赖于隐式网格可能会变得混乱和难以理解。我们建议与显式网格相结使用。 在此示例中，第一个网格项自动放置并跨越 2 行，第二个项目显式放置在第一列中，并跨越 2 列创建第二个垂直轨道。 第三和第四网格项实际上都会自动放在第四行，但第五网格项明确地放在先前不存在的第三列中。 这将创建第三个垂直轨道，并且由于网格自动放置，第三个项目向上移动一行以填充空间。

总结

本文并未涵盖有关显式和隐式网格的所有内容，它应该为您提供的不仅仅是对该概念的深入理解。 了解创建隐式网格线和隐式轨迹的原因和方式对于使用网格布局至关重要。

你可以在 CodePen 集合 中找到本文中使用的所有示例。

如果您想了解有关网格的更多信息，请查看：

• 5分钟学会 CSS Grid 布局
• CSS Grid 布局完全指南(图解 Grid 详细教程)
• 如何使用 CSS Grid 快速而又灵活的布局
• CSS Grid 布局示例大全

英文原文： https://css-tricks.com/difference-explicit-implicit-grids/

如果你觉得本文对你有帮助，那就请分享给更多的朋友

关注「前端干货精选」加星星，每天都能获取前端干货