Grid(网格) 布局最终使我们能够在CSS中定义网格，并将网格项放置到网格单元格中。这本身就很棒，但事实上我们不需要指定每个网格轨道，也不必手动放置每一个网格项。因为 Grid(网格) 布局足够灵活，可以适应它们的网格项。 这些都由所谓的显式和隐式网格来处理的。 这篇文章中所有代码示例都附有图片，以显示网格线和轨道。 如果你想自己修改代码，我建议你下载Firefox Nightly，因为它目前有调试网格最好的DevTools。
显式的 Grid(网格)
我们可以使用 grid-template-rows，grid-template-columns 和 grid-template-areas 属性来定义形成网格的固定数量的网格线和网格轨道。这种手动定义的 Grid 称为显式网格。 
具有4个垂直轨道（列）和2个水平轨道（行）的显式网格。
See the Pen CSS Grid Layout: The explicit grid by Manuel Matuzovic (@matuzo) on 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.
自动重复轨道
一个带有4个垂直轨道的显式网格，每个100px宽，由重复表示法生成。
See the Pen CSS Grid Layout: Auto-fitting by Manuel Matuzovic (@matuzo) on CodePen.
repeat()函数非常有用，但它可以进一步自动化。我们可以使用auto-fill和auto-fit关键字，来替代设置固定数量的重复。
自动填充轨道（auto-fill）
auto-fill 关键字创建适合网格容器的轨道数，而不会导致网格溢出。 
重复放入宽度为100px的垂直轨道，以适应网格容器。
See the Pen CSS Grid Layout: auto-fill by Manuel Matuzovic (@matuzo) on 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相同，只是在网格项目放置后，它只会根据需要创建任意数量的轨道，并且任何空的重复轨道都会折叠在一起。
.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 关键词可根据需要创建尽可能多的轨道，并将轨道尽可能多地放入网格容器中。
See the Pen CSS Grid Layout: auto-fit by Manuel Matuzovic (@matuzo) on CodePen.
另一方面，如果在repeat()中使用固定数量的垂直轨道，并且网格项数超过该值，则添加更多行。您可以在下一节中阅读更多相关内容：隐式网格。 
如果网格项多于垂直轨道，则会添加更多行。
See the Pen CSS Grid Layout: implicit rows by Manuel Matuzovic (@matuzo) on 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关键字重复表示法。
See the Pen CSS Grid Layout: auto-fill on both axes by Manuel Matuzovic (@matuzo) on CodePen.
隐式的 Grid(网格)
如果网格项的数量多于网格单元格，或者网格项位于显式网格外部，则网格容器会通过向网格添加网格线自动生成网格轨道。 显式网格与这些额外的隐式轨道和网格线线一起形成所谓的隐式网格。 
两个网格项放置在显式网格之外，导致创建隐式网格线条和网格轨道。
See the Pen CSS Grid Layout: implicit tracks by Manuel Matuzovic (@matuzo) on CodePen.
.item:first-child {
grid-column-start: -1;
}
.item:nth-child(2) {
grid-row-start: 4;
}
隐式轨道的宽度和高度是自动设置。它们的大小足以适合放置的网格项，但可以更改其默认行为。
调整隐式轨道
grid-auto-rows和grid-auto-columns属性使我们可以控制隐式轨道的大小。
.grid {
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的高度。 
固定宽度和高度的隐式轨道。
See the Pen CSS Grid Layout: Sizing implicit tracks by Manuel Matuzovic (@matuzo) on CodePen.
通过使用 minmax() 函数来指定范围，可以使调整隐式轨道更灵活。
.grid {
grid-auto-columns: minmax(200px, auto);
grid-auto-rows: minmax(60px, auto);
}
隐式轨道现在至少有200px宽和60px高，但如果内容需要它将会扩展。
将网格扩展到开始
隐式轨道可能不仅仅被添加到显式网格的末尾。也可能扩展到显式网格的开始处。 
一个隐式网格，由一行和一列扩展到开头
See the Pen CSS Grid Layout: Implicit grid by Manuel Matuzovic (@matuzo) on 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 属性来指定如何把网格项自动放置到网格容器。 
如果网格项数超过单元格数量，则添加新列而不是行。
See the Pen CSS Grid Layout: grid-auto-flow by Manuel Matuzovic (@matuzo) on 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自动调整单元格大小，因此不必定义显式网格。 
没有显式行和轨道的隐式网格。
See the Pen CSS Grid Layout: Implicit grid only by Manuel Matuzovic (@matuzo) on 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 集合 中找到本文中使用的所有示例。 文章来源：https://css-tricks.com
