这篇文章是 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-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 ）并命名为 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
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。