<万博manbetx平台> CSS Grid 布局示例大全-万博manbetx平台

CSS Grid 布局示例大全

10年服务1亿前端开发工程师

这篇文章是 CSS Grid 布局示例集合。 如果想完整的学习CSS Grid 布局,请查看 CSS Grid 布局完全指南(图解 Grid 详细教程),这里有 Grid 所有的术语,已经相关属性的详细介绍和示例。从示例中你也会看到 Flexbox 布局,两者结合使用更加方便灵活。

浏览示例时建议拖动窗口大小,有些是响应式布局。那么我们开始我们的示例。

圣杯布局

说到布局,首先肯定是经典的三列圣杯布局。来看实现:

See the Pen by Geoff Graham () on .0

当然,现在移动端访问已经超过桌面端,所以我们无法绕过响应式布局,加上媒体查询,轻松搞定:

See the Pen by Geoff Graham () on .0

2列布局

一个经典的博客布局,其中一列是内容,另一列是侧栏。

See the Pen by Geoff Graham () on .0

还是响应式布局:

See the Pen by Geoff Graham () on .0

均匀分布,按需要调整

一个简单的排列布局:

See the Pen by Geoff Graham () on .0

文章内容布局

注意,图片的尺寸超过超出文章容器宽度。

See the Pen by Geoff Graham () on .0

灵活的布局变化

示例1:最基本的网格布局:

See the Pen by rachelandrew () on .0

示例2:基于网格线的位置展示,使用数字编号的网格线:

See the Pen by rachelandrew () on .0

示例3:基于网格线的位置布局,使用 grid-row 和 grid-column 简写:

See the Pen by rachelandrew () on .0

示例4:基于网格线的位置布局,使用 grid-area 简写:

See the Pen by rachelandrew () on .0

示例5:基于网格线布局网格轨道:

See the Pen by rachelandrew () on .0

示例6:基于网格线布局网格轨道,使用 span 关键字:

See the Pen by rachelandrew () on .0

示例7:使用命名的网格线布局的示例:

See the Pen by rachelandrew () on .0

示例8:使用命名的网格线,及 span 关键字布局的示例:

See the Pen by rachelandrew () on .0

示例9:使用 repeat 函数用来表示重复创建相同定义的网格,本例还具有命名网格线:

See the Pen by rachelandrew () on .0

示例10:显式网格和隐式网格:

See the Pen by rachelandrew () on .0

示例11:定义网格区域:

See the Pen by rachelandrew () on .0

示例12:无需清除

如果我添加 footer 到我的标记中,并定义一个 grid-area,并使用 grid-template-areas 将其放置在网格上,则可以看到它位于内容列的下方。 由于这个 footer 在网格上有轨道,所以不需要清除,它不能跳到另一个轨道。

此示例还显示了示例5中描述的问题,默认情况下,侧栏上的背景应该伸展到最大高度,类似于Flexbox的默认值。

See the Pen by rachelandrew () on .0

示例13:使用媒体查询重新定义网格区域:

See the Pen by rachelandrew () on .0

示例14:网格中的排序无网格项源顺序无关:

See the Pen by rachelandrew () on .0

示例15:网格项堆叠,堆叠顺序由 z-index 控制:

See the Pen by rachelandrew () on .0

示例16:网格项作为新的定位上下文,你可以将网格项绝对定位在网格区域内。

See the Pen by rachelandrew () on .0

示例17:自动防止,网格将自动将网格项定位在父网格上。

See the Pen by rachelandrew () on .0

示例18:自动流动,默认行为是按行排列元素,沿行排列,直到没有更多的位置,然后移动到下一行。如果一行没有声明,则会创建一个隐含的网格轨道来保存这些项目。

See the Pen by rachelandrew () on .0

示例19:网格自动放置与定位的网格项混合, 如果已经放置了一个子元素,那么自动放置算法将首先放置该元素,然后找出如何处理尚未放置的任何子元素。

See the Pen by rachelandrew () on .0

示例20:重复轨道定义中的auto-fill关键字 在示例9中,我们表示我们希望我们的行轨道列表重复三次。该规范还定义了 auto-fillauto-fit 关键字。

See the Pen by rachelandrew () on .0

示例21:嵌套网格, 将一个网格嵌套在另一个网格中的简单示例。任何网格区域都可以通过设置 display:grid 然后定义行和列来成为一个网格。

See the Pen by rachelandrew () on .0

示例22:隐式命名网格线, 当使用命名区域时,隐式命名网格线是通过将 -start-end 附加到已定义的命名区域来创建的。它们可以像你明确命名的网格线一样使用。

See the Pen by rachelandrew () on .0

示例23:使用顺序 网格支持Flexbox中的 order 属性。如果您明确定位网格项,那么顺序将影响绘画顺序,因此将影响绘制顺序,因此在没有应用z-index 的情况下,顺序将叠加网格项。

See the Pen by rachelandrew () on .0

示例24:盒子对齐 align-items, 在这个例子中,我使用了网格背景图像来显示网格。我在左边定义了4个相等大小的网格区域,它们覆盖了三行和列线内的正方形区域。

See the Pen by rachelandrew () on .0

示例25:盒子对齐 justify-items,在这个例子中,我使用了网格背景图像来显示网格。我在左边定义了4个相等大小的网格区域,它们覆盖了三行和列线内的正方形区域。

See the Pen by rachelandrew () on .0

示例26:盒子对齐 align-self,在这个例子中,我使用了网格背景图像来显示网格。我在左边定义了4个相等大小的网格区域,它们覆盖了三行和列线内的正方形区域。

See the Pen by rachelandrew () on .0

示例27:盒子对齐 justify-self,在这个例子中,我使用了网格背景图像来显示网格。我在左边定义了4个相等大小的网格区域,它们覆盖了三行和列线内的正方形区域。

See the Pen by rachelandrew () on .0

示例28:在 auto-fill 重复轨道 中的 minmax() 。在这个例子中,我创建了一个网格,其中包含了200列像素的列轨迹,以适应容器,列之间的剩余空间相等。 在 minmax()函数中,第一个值是我想要的轨迹尺寸的最小值,第二个是最大值。 通过使用 1fr 作为最大值,空间平均分配。

See the Pen by rachelandrew () on .0

示例29:minmax()和跨列和跨行,在这个例子中,我创建了一个网格,其中包含了200列像素的列轨迹,以适应容器,列之间的剩余空间相等。 在 minmax() 函数中,第一个值是我想要的轨迹尺寸的最小值,第二个是最大值。 通过使用 1fr 作为最大值,空间平均分配。

See the Pen by rachelandrew () on .0

示例30:auto-fill 关键字 结合命名的网格线,在这个例子中,我正在创建一个网格,其中包含适合放入容器的100个像素的列轨道(在本例中为viewport )并命名为 col。 然后,我可以使用命名行和 span 来定位网格项。

See the Pen by rachelandrew () on .0

示例31:一个简单的minmax示例,在这个例子中,我创建了三列轨道网格。第一列轨道的最小宽度为200px,最大值为1fr,使用minmax()表示法定义。另外两个轨道固定在200像素。

See the Pen by rachelandrew () on .0

示例32:对齐网格,在这个例子中,我创建了一个四列轨道网格,轨道具有绝对大小,并且总体上小于网格容器的面积。因此,我们可以将容器中的网格对齐 – 默认情况下,两个维度都是 start 。

See the Pen by rachelandrew () on .0

示例33:通过 space-around 和 space-between 对齐网格,在这个例子中,我创建了一个四列轨道网格,轨道具有绝对大小,并且总体上小于网格容器的面积。这次我使用:

  • align-content: space-around
  • justify-content: space-between

See the Pen by rachelandrew () on .0

示例34:使用自动填充(auto-fill)实现轨道列表中的多个轨道, repeat 语法可以采用一个轨道列表而不是单个值,这意味着您可以重复更复杂的轨道列表。

See the Pen by rachelandrew () on .0

示例35:使用auto-fill 和 minmax() 实现轨道列表中的多个轨道,repeat 语法可以采用一个轨道列表而不是单个值,这意味着您可以重复更复杂的轨道列表。 你可以在这个轨道列表中使用 minmax(),在这里我将我的大轨道2fr和小1fr的最大值。 这意味着更大的轨道将有更多的剩余空间分配。

See the Pen by rachelandrew () on .0

示例36:基于百分比的网格和 间距(gap):

See the Pen by rachelandrew () on .0

示例37:auto-fill vs. auto-fit,演示自动填充 auto-fill 和 自适应 auto-fit关键字之间的区别。

See the Pen by rachelandrew () on .0

示例来源:

相关资源

更多关于 Flexbox 的优秀文章:

更多关于 CSS Grid 布局的优秀文章

赞(0) 打赏
未经允许不得转载:万博manbetx平台 » CSS Grid 布局示例大全

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏