这篇文章是 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
一个经典的博客布局,其中一列是内容,另一列是侧栏。
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-template-areas 将其放置在网格上,则可以看到它位于内容列的下方。 由于这个 footer 在网格上有轨道,所以不需要清除,它不能跳到另一个轨道。
- grid-area
此示例还显示了示例 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:重复轨道定义中的
关键字 在示例 9 中,我们表示我们希望我们的行轨道列表重复三次。该规范还定义了
- auto-fill
和
- auto-fill
关键字。
- auto-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
。 然后,我可以使用命名行和 span 来定位网格项。
- col
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 对齐网格,在这个例子中,我创建了一个四列轨道网格,轨道具有绝对大小,并且总体上小于网格容器的面积。这次我使用:
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
来源: http://www.css88.com/archives/8635