《深度解析 Grid 布局：掌握最强大的 CSS 布局方案》

在现代 Web 开发中，对 CSS 布局的深入理解是提高页面开发效率的关键。随着 Web 技术的不断演进，实现各种复杂布局的方式层出不穷。

为了帮助你更好地掌握 CSS 布局，我花费了数周时间整理了一个全面的系列，其中包括了 CSS 中各种布局的详细解析、实现方式和常用技巧。通过这个系列，你将对 CSS 布局有一个全新的认识。

Grid 布局：最新、最强大的布局方案

📔文章概述：

由于篇幅较长，请谨慎阅读。下图概述了本篇文章的主要知识点。

📔正文深入解析：

基本概念：

网格：一组相交的水平线和垂直线，定义了网格的列和行，我们可以将网格元素放置在与这些行和列相关的位置上。
网格容器：所谓的网格容器是所有网格项的父元素，其 display 属性的值为 grid。
网格项：即网格容器的子元素（不包含子元素的子元素）。
网格线：组成网格项的分界线，Grid 会为我们创建编号的网格线来定位每一个网格元素。例如，一个三列两行的网格中就有四条纵向的网格线。
网格轨道：一个网格轨道是网格中任意两条线之间的空间。在下图中你可以看到一个高亮的轨道——网格的第一个行轨道。
网格单元：两个相邻的列网格线和两个相邻的行网格线组成的是网格单元。在下图中，我会将第一个网格单元作高亮处理。
网格区域：四个网格线包围的总空间。下图高亮的网格区域扩展了2列以及2行。
fr（单位）：剩余空间分配数。用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

📔深度剖析 Grid 布局：

Grid 布局为我们提供了强大的工具来创建响应式和灵活的布局，以下是一些进阶的概念和技巧：

区域命名：使用 grid-template-areas 属性，我们可以为网格区域指定具体的名称，从而更直观地布局元素。
自适应网格：利用 auto-fill 和 auto-fit，实现自适应网格，使布局更具弹性。
媒体查询与断点：结合媒体查询，为不同屏幕尺寸定义不同的 Grid 布局，确保在各种设备上都有良好的显示效果。
子元素定位：使用 grid-column 和 grid-row 属性，我们可以精确地控制子元素在网格中的位置。

深入理解 fr 单位：

在现代布局中，fr 单位是一个强大的工具。深入了解如何灵活运用 fr 单位，合理分配剩余空间，使得布局更具弹性。

🍚容器属性

🍉display 属性解析

基础概念：

display 属性用于确定一个容器采用何种方式呈现，特别是在网格布局中，它能定义容器是块级网格还是行内网格。语法如下：

值得注意的是，一旦容器设为网格，那么网格项中的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等设置将失效。

示例演示：

考虑以下示例代码：

CSS 样式（init.css）：

body { margin: 0; padding: 20px; }

.item { height: 300px; width: 300px; line-height: 300px; text-align: center; font-size: 140px; }

.item1 { background-color: #e6005c; }

.item2 { background-color: #777bce; }

.item3 { background-color: #c9780c; }

.item4 { background-color: #fffae8; }

.item5 { background-color: #ce3b3b; }

.item6 { background-color: #e666ff; }

.item7 { background-color: #f4ea20; }

.item8 { background-color: #b4a4ca; }

执行效果：

结论：

通过以上例子，我们清晰地看到了 display: grid 的效果。容器按照定义的网格列数进行布局，而每个子项（item）都被放置在相应的网格单元中。

注意事项：

在使用 display: grid 时，注意子元素的其他样式可能会失效，需谨慎使用并根据具体情况进行调整。

通过深入理解 display 属性，我们能更好地掌握网格布局，提高页面布局的灵活性和可维护性。在实际项目中，巧妙地利用网格布局将为页面带来更为优雅的结构。

🍚Grid Template详解

🍉1. grid-template-columns 和 grid-template-rows 属性

grid-template-columns 和 grid-template-rows 属性用于定义网格的列宽和行高，通过空格分隔，其语法如下：

属性值解析：

轨道大小 (<track-size>): 可以使用任意 CSS 长度、百分比、分数，或者 fr 单位。
网格线名字 (<line-name>): 可以选择任意名称。

示例代码：

执行效果：

解读示例：

在这个示例中，.container 被定义为一个网格容器，使用 grid-template-columns 和 grid-template-rows 属性来指定网格的列和行的大小。这样的设置使得页面呈现出多个灵活的网格单元。

注意事项：

grid-template-columns 和 grid-template-rows 可以混用长度单位、百分比、分数、以及 fr 单位，允许开发者根据具体需求来设计网格布局。

通过灵活运用 grid-template-columns 和 grid-template-rows 属性，我们能够打造出多样化、响应式的网格布局，为页面带来更丰富的视觉效果。

🍉2. 命名网格线

在 grid-template-columns 和 grid-template-rows 属性中，你还可以使用方括号 [] 为每条网格线指定名称，以便今后引用。以下是示例代码：

实际效果：

解释示例：

在这个示例中，通过使用 [c1]、[c2] 等方括号，我们为每一根垂直网格线指定了名称。这样的命名方式能够提高代码的可读性，同时也方便了将来对网格线进行引用。

注意事项：

网格线的命名可以使用任意合法的标识符，开发者可以根据实际需求选择有意义的名字。
使用命名网格线可以更加清晰地表达布局意图，特别是在复杂的网格布局中。

通过这种方式，我们能够更具有条理地构建网格系统，有助于更好地维护和扩展代码。

🍉3. 使用 repeat() 函数简化网格设置

有时在创建网格时，需要编写重复的值，尤其是在网格较大时。这时，repeat() 函数能够方便地解决这个问题。该函数适用于 CSS Grid 属性中的 grid-template-columns 和 grid-template-rows。以下是语法规则：

属性值解释：

repeat: 表示重复的次数。

可选值：

number: 整数，确定确切的重复次数。
auto-fill: 以网格项为准自动填充。
auto-fit: 以网格容器为准自动填充。
value: 表示重复的值。

可选值：

length: 非负长度。
percentage: 相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。
flex: 单位为 fr 的非负维度，指定轨道弹性布局的系数值。

示例代码：

通过使用 repeat() 函数，我们能够更简洁地定义重复的网格布局，使代码更加清晰易懂。这对于创建大型网格系统时特别有用。

🍉4. 使用 minmax() 函数定义范围

minmax() 函数为 CSS Grid 中的 grid-template-columns 和 grid-template-rows 提供了一个闭区间的长宽范围。以下是语法规则：

可选值解释：

length: 非负长度。
percentage: 相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。
flex: 单位为 fr 的非负维度，指定轨道弹性布局的系数值。

示例代码：

在这个例子中，minmax() 函数将列的宽度范围设置为最小值为 100px，最大值为 400px。这样的设置允许网格布局在不同屏幕尺寸下灵活调整，提供更好的适应性。

🍉5. 使用 grid-template-areas 属性创建网格模板

grid-template-areas 属性允许通过引用 grid-area 属性设置的网格区域名称来定义网格模板。以下是语法结构：

属性值解释：

grid-area-name: 使用 grid-area 属性设置的网格区域名称。
.: 点号表示一个空网格单元。
none: 没有定义网格区域。

示例代码：

在此示例中，通过 grid-template-areas 属性定义了一个三行两列的网格模板，其中每个区域都由其名称标识。每个区域在布局时会占据相应的网格单元，使得页面布局更加直观和易读。

🍚使用 grid-template 简写创建网格模板

grid-template 属性是 grid-template-rows、grid-template-columns 和 grid-template-areas 属性的简写形式。以下是语法结构：

.container { grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? ; }

属性值解释：

none: 将三个属性都设置为初始值，即一行、一列、一个区域。
grid-template-rows / grid-template-columns: 设置 grid-template-rows 和 grid-template-columns 为指定值，并将 grid-template-areas 设置为 none。
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?: 使用简写方式定义网格模板，包括行、列和区域的信息。

示例代码：

上述示例通过 grid-template 属性简写，实现了与前面代码相同的效果。然而，鉴于可读性，建议在实际项目中使用详细的属性设置，以确保代码清晰易懂。

🍚使用 gap 属性设置网格间距

gap 属性是 row-gap 和 column-gap 属性的简写形式。此属性用于指定网格线之间的大小，即列与行之间的间距宽度。以下是语法结构：

属性值解释：

<line-size>: 长度值，例如 20px。

示例代码：

上述示例演示了三种设置网格间距的方式，它们都会产生相同的效果。需要注意的是，gap、column-gap 和 row-gap 这两个属性在之前的版本中带有 grid- 前缀，即 grid-gap、grid-column-gap 和 grid-row-gap。在实际应用中，为了确保兼容性，可以同时使用带有和不带有前缀的属性。

🍚items 属性

🍉1. align-items 属性

align-items 属性用于沿着列轴对齐网格内的内容。以下是语法结构：

属性值解释：

start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容位于网格区域的垂直中心位置
stretch: 内容高度占据整个网格区域空间（默认值）

🍉2. justify-items 属性

justify-items 属性用于沿着行轴对齐网格内的内容。以下是语法结构：

属性值解释：

start: 内容与网格区域的左端对齐
end: 内容与网格区域的右部对齐
center: 内容位于网格区域的水平中心位置
stretch: 内容宽度占据整个网格区域空间（默认值）

🍉3. place-items 属性

place-items 是一个方便的简写属性，允许同时设置列轴和行轴上的对齐方式。以下是语法结构：

如果只提供一个值，第二个值将默认与第一个相同。

示例代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>grid-template 属性</title> <link rel="stylesheet" href="./init.css" /> <style> .container { background-color: #fef3c9; display: grid; width: 1600px; height: 800px; margin: 0 auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; /* align-items 属性，控制网格项垂直对齐方式 */ align-items: end; /* justify-items 属性，控制网格项水平对齐方式 */ justify-items: center; /* place-items 属性，是 align-items 属性和 justify-items 的简写形式如果只写一个值，第二个值默认与第一个值相同 */ place-items: end center; } .item { height: 200px; width: 200px; line-height: 200px; } </style></head><body> <div class="container"> <div class="item1 item">1</div> <div class="item2 item">2</div> <div class="item3 item">3</div> <div class="item4 item">4</div> <div class="item5 item">5</div> <div class="item6 item">6</div> <div class="item7 item">7</div> <div class="item8 item">8</div> </div></body></html>

在这个例子中，通过 place-items 属性同时设置了垂直方向的底部对齐和水平方向的居中对齐。这提供了一种简洁的方式来控制网格项在网格容器中的位置。

🍚content 属性

🍉1. align-content 属性

align-content 属性用于设置网格容器内的网格，沿着列轴的对齐方式。以下是语法结构和属性值：

.container {

align-content: start | end | center | stretch | space-around | space-between | space-evenly; }

属性值解释：

start: 将网格与网格容器的顶部对齐。
end: 将网格与网格容器的底部对齐。
center: 将网格与网格容器的垂直中间对齐。
stretch: 调整网格项的大小，让高度填充整个网格容器。
space-around: 在网格项之间设置均等高度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半。
space-between: 在网格项之间设置均等高度空白间隙，其外边缘无间隙。
space-evenly: 在每个网格项之间设置均等高度的空白间隙，包括外边缘。

🍉2. justify-content 属性

justify-content 属性用于设置网格容器内的网格，沿着行轴的对齐方式。以下是语法结构和属性值：

.container {

justify-content: start | end | center | stretch | space-around | space-between | space-evenly; }

属性值解释：

start: 将网格与网格容器的左部对齐。
end: 将网格与网格容器的右部对齐。
center: 将网格与网格容器的水平中间对齐。
stretch: 调整网格项的大小，让宽度填充整个网格容器。
space-around: 在网格项之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半。
space-between: 在网格项之间设置均等宽度空白间隙，其外边缘无间隙。
space-evenly: 在每个网格项之间设置均等宽度的空白间隙，包括外边缘。

🍉3. place-content 属性

place-content 属性是 align-content 和 justify-content 的简写形式，用于同时设置网格容器内的网格在列轴和行轴上的对齐方式。以下是语法结构和示例代码：

如果只写一个值，第二个值默认与第一个值相同。

示例代码：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>place-content 属性</title> <link rel="stylesheet" href="./init.css" /> <style> .container { background-color: #fffae8; display: grid; width: 1600px; height: 800px; margin: 0 auto; grid-template-columns: 300px 300px 300px 300px; grid-template-rows: 300px 300px; /* place-items 属性，控制网格项垂直和水平对齐方式 */ place-items: center; /* align-content 属性，控制网格容器垂直对齐方式 */ align-content: space-around; /* justify-content 属性，控制网格容器水平对齐方式 */ justify-content: space-around; /* place-content 属性，是 align-content 属性和 justify-content 的简写形式如果只写一个值，第二个值默认与第一个值相同 */ place-content: space-around; } .item { height: 200px; width: 200px; line-height: 200px; } </style> </head> <body> <div class="container"> <div class="item1 item">1</div> <div class="item2 item">2</div> <div class="item3 item">3</div> <div class="item4 item">4</div> <div class="item5 item">5</div> <div class="item6 item">6</div> <div class="item7 item">7</div> <div class="item8 item">8</div> </div> </body></html>

执行结果可参考下图：

🍚grid-auto 属性

🍉1. grid-auto-columns 属性和 grid-auto-rows 属性

grid-auto-columns 和 grid-auto-rows 属性用于指定自动生成的隐式网络轨道（implicit grid tracks）的大小。这些轨道是在显示的时候根据内容需要而自动创建的，超出了指定网格范围的行或列。

它们的写法与 grid-template-columns 和 grid-template-rows 相同。如果未指定这些属性，浏览器将根据单元格内容的大小自动确定新增网格的列宽和行高。

🍉2. grid-auto-flow 属性

grid-auto-flow 属性控制自动布局算法的工作方式。以下是语法结构和属性值：

属性值：

row: 告诉自动布局算法按行依次填充，根据需要添加新行。
column: 告诉自动布局算法按列依次填充，根据需要添加新列。
dense: 告诉自动布局算法，如果后面出现较小的网格项，则尝试在网格中填充空洞。

这些属性允许更灵活地处理动态内容，确保网格可以适应未知数量的项目。

🍚grid 属性

grid 是一个CSS简写属性，用于同时设置显式网格属性和隐式网格属性，以及间距属性。具体包括以下属性：

显式网格属性: grid-template-rows、grid-template-columns 和 grid-template-areas
隐式网格属性: grid-auto-rows、grid-auto-columns 和 grid-auto-flow
间距属性: grid-column-gap 和 grid-row-gap

以下是 grid 属性的语法结构：

.container {

grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>; }

在实际开发中，建议使用单独的属性设置，以提高代码的可读性和维护性。例如，分别使用 grid-template-rows、grid-template-columns 和 grid-auto-flow 等属性。

这样的做法更符合良好的编码习惯，有助于代码的清晰和可维护性。

🍚网格项上的属性

定位属性：start / end

🍉1. grid-column-start 属性、grid-column-end 属性、grid-row-start 属性、grid-row-end 属性

要确定网格项的位置，可以使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 这四个属性。语法结构如下：

.item {

/* 左边框所在的垂直网格线 */ grid-column-start: <number> | <name> | span <number> | span <name> | auto;

/* 右边框所在的垂直网格线 */ grid-column-end: <number> | <name> | span <number> | span <name> | auto;

/* 上边框所在的垂直网格线 */ grid-row-start: <number> | <name> | span <number> | span <name> | auto;

/* 下边框所在的垂直网格线 */ grid-row-end: <number> | <name> | span <number> | span <name> | auto; }

属性值：

<number>: 使用数字代表相应编号的网格线。
<name>: 使用网格线名称指代相应命名的网格线。
span <number>: 网格项将跨越指定数量的网格轨道。
span <name>: 网格项将跨越一些轨道，直到碰到指定命名的网格线。
auto: 自动布局，或者自动跨越，或者跨越一个默认的轨道。

示例代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>start / end</title> <link rel="stylesheet" href="./init.css" /> <style> .container { background-color: #fffae8; display: grid; width: 920px; height: 820px; margin: 0 auto; grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4]; grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4]; gap: 10px; } .item { line-height: 200px; height: 200px; } .item1 { /* 1. 纯数字写法 */ grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /* 2. 纯名字写法 */ grid-column-start: c1; grid-column-end: c3; grid-row-start: r1; grid-row-end: r3; /* 3. 数字 + span 数字 */ grid-column-start: 1; grid-column-end: span 2; grid-row-start: 1; grid-row-end: span 2; /* 4. 数字 + span 名字*/ grid-column-start: 1; grid-column-end: span c3; grid-row-start: 1; grid-row-end: span r3; width: auto; height: auto; } </style></head><body> <div class="container"> <div class="item1 item">1</div> <div class="item2 item">2</div> <div class="item3 item">3</div> <div class="item4 item">4</div> <div class="item5 item">5</div> <div class="item6 item">6</div> <div class="item7 item">7</div> <div class="item8 item">8</div> </div></body></html>

效果图：

注意事项：

如果没有声明 end 则默认将跨越一个轨道。
网格项如果相互重叠，可以使用 z-index 来控制它们的堆叠顺序。

不声明 end 示例代码：

效果图：

堆叠示例代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>堆叠</title> <link rel="stylesheet" href="./init.css" /> <style> .container { background-color: #fffae8; display: grid; width: 920px; height: 620px; margin: 0 auto; grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4]; grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4]; gap: 10px; } .item { line-height: 200px; height: 200px; } .item1, .item2 { width: auto; height: auto; } .item1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /* 通过 z-index 控制堆叠顺序 */ z-index: 2; } .item2 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } </style></head><body> <div class="container"> <div class="item1 item">1</div> <div class="item2 item">2</div> <div class="item3 item">3</div> <div class="item4 item">4</div> <div class="item5 item">5</div> <div class="item6 item">6</div> <div class="item7 item">7</div> <div class="item8 item">8</div> </div></body></html>

效果图：

🍉2. 网格定位简写：grid-column 和 grid-row

grid-column 属性和 grid-row 属性
grid-column 属性是 grid-column-start 和 grid-column-end 两个属性的简写。
grid-row 属性是 grid-row-start 和 grid-row-end 两个属性的简写。

语法结构如下：

示例代码：

注意事项：

grid-column 和 grid-row 属性提供了更简便的方式定义网格项的位置。
使用数字、命名或者跨越方式，你可以轻松指定网格项的位置范围。

通过这种简写形式，你能更加便捷地控制网格布局中各个项的位置关系。

🍚grid-area 属性

🍉网格项区域定义：grid-area 属性

grid-area 属性是 grid-column-start、grid-row-start、grid-column-end、grid-row-end 这四个属性的简写形式，用于指定网格项的区域。其语法结构如下：

.item {

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; }

属性值：

name: 定义于 grid-template-areas 中的命名区域。
<row-start> / <column-start> / <row-end> / <column-end>: 由 <number> | <name> | span <number> | span <name> | auto 中的一种组成。

示例代码：