CSS 网格布局中有 显式网格 和 隐式网格 之分，在 CSS 网格布局中可以使用 grid-template-columns 、 grid-template-rows 和 grid-template-areas 可以定义显式网格，并且可以定义显式网格固定的网格轨道数量，同时 grid-template-columns 和 grid-template-rows 可以用来显式指定网格轨道尺寸。而在 CSS 网格布局中，可以在网格容器上使用 grid-auto-columns 、 grid-auto-rows 和 grid-auto-flow 可以显式定义隐式网格，并且 grid-auto-columns 和 grid-auto-rows 可以用来指定隐式网格轨道的尺寸。那么在这篇文章中，主要和大家一起探讨在 CSS 网格布局中如何定义隐式网格和指定隐式网格轨道尺寸。

定义隐式网格：grid-auto-rows/columns

在 CSS 网格布局中，使用 grid-template-columns、grid-template-rows 和 grid-template-areas 定义一个网格。使用这三个属性中的任何一个，都可以显式设置网格的网格轨道的明确数量（列和行）。这种方式定义的网格被称为 显式网格。而且还可以使用 grid-template-columns 和 grid-template-rows 显式设置网格轨道大小。比如：

.grid__container {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    gap: 10px;
}

使用 grid-template-columns 显式创建了一个 2 x 1 网格，网格每列的网格轨道宽度是 200px。

如果我们在上面这个已定义的显式网格中新增一个网格项，那么第三个网格项目会自动换行排列：

浏览器这样渲染是因为我们并没有明确地把网格项目放置到指定的网格单元格（或网格区域）上，因此它们会被 自动放置（Auto Placement） 。默认情况下，每个网格项目在行轴和列轴上的跨度（span）都是 1，所以它们都会被放置到下一个可用的网格单元格中。

后面我们将会花更多的篇幅和大家探讨网格项目自动放置的话题。

如果我们不让网格项目自动放置的话，可以通过用于网格项目的属性，比如 grid-row、grid-column 和 grid-area 将网格项目指定到具体的区域：

.grid__item {
    grid-column: 5
}

这个示例，使用grid-column: 5 把第三个网格项目放置在第五列，但grid-template-columns: repeat(2, 200px) 只显式定义了两个列，为了定位第三个网格项目，此时网格将会增加三个隐式的列。如果你使用浏览器的开发者工具查看Demo，可以看到下图这样的结果：

如果你不知道 grid-column、grid-row 和 grid-area 具体含义和使用方式并不重要，在后面我们会详细介绍。

也就是说，在 CSS 网格布局中，当网格项目被放置在显式网格之外，网格容器会给网格添加隐式网格线来生成隐式网格轨道。上面示例中”第三列“，”第四列“的网格轨道宽度是 0px，”第五列“网格轨道宽度是 auto，同时会创建隐式的网格线和隐式网格轨道：

正如上图所示，隐式网格线和显式网格线在一起构建成一个新的网格 ，该网格被称为隐式网格 。

在 CSS 网格中，除了使用 grid-column之外，还可以使用 grid-row 和 grid-area 将网格项目放置到显式网格区域之外，此时同样能创建隐式网格。比如：

.grid__container {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    gap: 10px;
}

.grid__item:nth-child(3) {
    grid-column: 4;
}

.grid__item:nth-child(4) {
    grid-row: 3;
    grid-column: span 2;
}

.grid__item:nth-child(5) {
    grid-area: 3 / 4 / 4 / 5;
}