您的位置:首页 » 分类: 前端资源 » 文章: CSS Grid 布局示例大全

CSS Grid 布局示例大全

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

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

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

圣杯布局

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

See the Pen CSS Grid – Holy Grail 2 by Geoff Graham (@geoffgraham) on CodePen.0

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

See the Pen CSS Grid: Holy Grail Layout – Responsive by Geoff Graham (@geoffgraham) on CodePen.0

2列布局

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

See the Pen CSS Grid: Header, Footer with 2-Column (Flexible) by Geoff Graham (@geoffgraham) on CodePen.0

还是响应式布局:

See the Pen CSS Grid: Header, Footer with 2-Column (Responsive) by Geoff Graham (@geoffgraham) on CodePen.0

均匀分布,按需要调整

一个简单的排列布局:

See the Pen CSS Grid Evenly Distributed, As Many As Needed by Geoff Graham (@geoffgraham) on CodePen.0

文章内容布局

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

See the Pen CSS Grid: Article with Breakout by Geoff Graham (@geoffgraham) on CodePen.0

灵活的布局变化

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

See the Pen Grid by Example 1: Defining a Grid by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 2: Line-based placement by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 3: Line-based placement shorthand by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 4: Line-based placement shorthand grid-area by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 5: Line-based placement spanning cells by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 6: Line-based placement span keyword by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 7: Line-based placement named lines by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 8: Line-based placement named lines with span by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 9: The repeat keyword by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 10: Explicit and Implicit Grid by rachelandrew (@rachelandrew) on CodePen.0

示例11:定义网格区域:

See the Pen Grid by Example 11: Defining Grid Areas by rachelandrew (@rachelandrew) on CodePen.0

示例12:无需清除

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

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

See the Pen Grid by Example 12: No clearing required by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 13: Redefining grid areas with media queries by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 14: Source independence by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 15: Layering items by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 16: Grid Area as a new positioning context by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 17: Grid Auto-placement by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 18: Grid auto-placement column by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 19: Auto-placement with a positioned element by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 20: auto-fill keyword in repeating track definitions by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 21: a nested Grid by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 22: Implicit named grid lines by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 23: Auto-placement and the order property by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 24: align-items by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 25: justify-items by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 26: align-self by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 27: justify-self by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 28: minmax() in auto-fill repeating tracks by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 29: minmax() and spanning columns and rows by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 30: auto-fill with named lines by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 31: simple minmax() example by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 32: aligning the grid by rachelandrew (@rachelandrew) on CodePen.0

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

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

See the Pen Grid by Example 33: fixed sizes can get extra space due to alignment properties by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 34: a track list used to auto-fill by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 35: Repeating multiple track lists with minmax() by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 36: Percentage grids and gaps by rachelandrew (@rachelandrew) on CodePen.0

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

See the Pen Grid by Example 37: auto-fill vs. auto-fit by rachelandrew (@rachelandrew) on CodePen.0

示例来源:
https://gridbyexample.com/examples/
https://css-tricks.com/snippets/css/css-grid-starter-layouts/

相关资源

更多关于 Flexbox 的优秀文章:

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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

发表评论

电子邮件地址不会被公开。 必填项已用*标注