[Grid 本赛季网格和隐式网格之间的区别

10年服务1亿Tian开发工程师

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

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

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

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

显式的 Grid(网格)

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

具有4个垂直轨道(列)和2个水平轨道(行)的显式网格。

具有4个垂直轨道(列)和2个水平轨道(行)的显式网格。

.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 by Manuel Matuzovic () on .0

自动重复轨道

一个带有4个垂直轨道的显式网格,每个100px宽,由重复表示法生成。

一个带有 4 个垂直轨道的显式网格,每个 100px 宽,由重复表示法生成。

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

自动填充轨道(auto-fill)

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

自动填充轨道(auto-fill)

重复放入宽度为 100px 的垂直轨道,以适应网格容器。

.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 会创建更多列。

自动调整轨道(auto-fit)

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

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

网格项多于垂直轨道

如果网格项多于垂直轨道,则会添加更多行。

为方便起见,我在上面的示例中使用了 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 关键字重复表示法

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

隐式的 Grid(网格)

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

两个网格项放置在显式网格之外,导致创建隐式网格线条和网格轨道。

两个网格项放置在显式网格之外,导致创建隐式网格线条和网格轨道。

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

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

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

调整隐式轨道

grid-auto-rowsgrid-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 的高度。

固定宽度和高度的隐式轨道。

固定宽度和高度的隐式轨道。

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

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

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

将网格扩展到开始

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

一个隐式网格,由一行和一列扩展到开头

一个隐式网格,由一行和一列扩展到开头

.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 属性来指定如何把网格项自动放置到网格容器。

如果网格项数超过单元格数量,则添加新列而不是行。

如果网格项数超过单元格数量,则添加新列而不是行。

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

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

未定义显式网格

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

没有显式行和轨道的隐式网格。

没有显式行和轨道的隐式网格。

.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 列创建第二个垂直轨道。 第三和第四网格项实际上都会自动放在第四行,但第五网格项明确地放在先前不存在的第三列中。 这将创建第三个垂直轨道,并且由于网格自动放置,第三个项目向上移动一行以填充空间。

总结

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

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

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

英文原文:

赞(3) 打赏
未经允许不得转载:WEBTian开发 » [Grid 本赛季网格和隐式网格之间的区别

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏