CSS Grid：让你的页面像变形金刚一样灵活
话说，各位前端同僚们，你们是不是也经常遇到这种抓狂的场景：辛辛苦苦码了一堆代码，信心满满地觉得页面布局完美无瑕，结果一换个屏幕尺寸，或者内容稍微一多，整个页面就瞬间崩塌，简直像一场精心策划的灾难片？
别慌，今天咱就来聊聊CSS Grid这个“变形金刚”，它能让你的页面像电影里的主角一样，根据内容和屏幕尺寸自动调整，优雅地适应各种情况，告别页面崩塌的噩梦。
一、Grid：一个“格子世界”的诞生
首先，我们得理解Grid的核心概念：它把页面划分成一个网格系统，就像一张Excel表格，或者一个棋盘。你可以自由地定义行和列，然后把页面元素放到这些格子里面。
想象一下，你正在装修房子。传统的布局方式就像是直接把家具硬塞进房间，结果不是挡住门就是影响采光。而Grid则像是先规划好房间的格局，划分出客厅、卧室、厨房等区域，然后再把家具放到合适的位置，一切都井井有条。
要开启Grid模式，只需要在容器元素上设置 display: grid 或者 display: inline-grid。前者让容器变成块级网格，后者则变成行内网格。
.container {
display: grid; /* 或者 display: inline-grid */
}二、定义你的“格子蓝图”：grid-template-columns 和 grid-template-rows
有了Grid，接下来就要定义这个“格子世界”的蓝图，也就是定义行和列的宽度和高度。 这就要用到 grid-template-columns 和 grid-template-rows 这两个属性。
grid-template-columns 定义列的宽度，可以接受多种值：
- 固定值 (px, em, rem, etc.): 指定列的固定宽度，比如
grid-template-columns: 100px 200px 150px;会创建三列，宽度分别是100像素、200像素和150像素。 - 百分比 (%): 相对于容器的宽度，比如
grid-template-columns: 25% 50% 25%;会创建三列，分别占据容器宽度的25%、50%和25%。 fr单位 (fractional unit): 这是Grid的精华所在！它代表可用空间的比例。例如，grid-template-columns: 1fr 2fr 1fr;会创建三列，它们会平分容器剩余的空间，比例分别是1:2:1。 想象一下分蛋糕，fr就像是把蛋糕切成几份，你可以根据需求随意分配。auto: 让浏览器自动决定列的宽度，通常会根据内容来调整。minmax()函数: 设置列宽的最小值和最大值，比如grid-template-columns: minmax(100px, 1fr);表示列宽最小是100像素，最大可以占据剩余空间的1份。这个函数非常实用，可以防止内容溢出，同时又能让列宽灵活伸缩。
grid-template-rows 的用法和 grid-template-columns 类似，只是它定义的是行的高度。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列，比例 1:2:1 */
grid-template-rows: auto 150px auto; /* 三行，第二行固定高度 150px，其他两行自动调整 */
}三、让元素各就各位：grid-column 和 grid-row
定义好网格后，就要把页面元素放到对应的格子里面。 这就要用到 grid-column 和 grid-row 这两个属性。
这两个属性可以指定元素占据的列和行。 它们接受两种值：
- 起始线和结束线: 用数字表示，从1开始计数。 例如，
grid-column: 1 / 3;表示元素从第一列的起始线开始，到第三列的起始线结束，也就是占据两列。grid-row: 2 / 4;表示元素从第二行的起始线开始，到第四行的起始线结束，也就是占据两行。 - 起始线和跨度: 用
span关键字表示。 例如，grid-column: 2 / span 2;表示元素从第二列的起始线开始，跨越两列。grid-row: 1 / span 3;表示元素从第一行的起始线开始，跨越三行。
.item1 {
grid-column: 1 / 3; /* 占据第一列和第二列 */
grid-row: 1 / 2; /* 占据第一行 */
}
.item2 {
grid-column: 3 / 4; /* 占据第三列 */
grid-row: 1 / 3; /* 占据第一行和第二行 */
}四、自动适应的秘密武器：auto-fit 和 auto-fill
好了，铺垫了这么多，终于要说到正题了！ CSS Grid之所以能自动适应列宽和行高，很大程度上要归功于 repeat() 函数和 auto-fit 和 auto-fill 关键字的巧妙结合。
repeat() 函数可以简化重复的列或行定义。 例如，grid-template-columns: repeat(3, 1fr); 等价于 grid-template-columns: 1fr 1fr 1fr;。
auto-fit 和 auto-fill 则是让Grid自动创建尽可能多的列或行的关键。 它们通常和 repeat() 函数以及 minmax() 函数一起使用。
auto-fit: 会尽可能地填充容器，如果所有列的宽度加起来小于容器的宽度，它会拉伸列的宽度，让它们填满整个容器。 可以把它想象成一个“弹性填充”模式，它会主动适应容器的大小。auto-fill: 会创建尽可能多的列，即使有些列是空的。 可以把它想象成一个“按需创建”模式，它会根据内容自动生成列，但不会主动拉伸列的宽度。
举个例子：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/*
- auto-fit: 尽可能创建列，并填充容器
- minmax(200px, 1fr): 每列的最小宽度是200像素，最大宽度是剩余空间的1份
*/
}这段代码会创建一个响应式的网格布局，它会根据容器的宽度自动创建尽可能多的列，每列的最小宽度是200像素。 当容器的宽度足够容纳多列时，Grid会自动创建新的列。 当容器的宽度不足以容纳多列时，Grid会将列挤压到最小宽度，并自动换行。
五、行高的自动调整：grid-auto-rows
除了列宽，行高的自动调整也很重要。 grid-auto-rows 属性可以控制Grid自动创建的行的默认高度。
- 固定值 (px, em, rem, etc.): 指定行的固定高度。
auto: 让浏览器自动决定行的高度，通常会根据内容来调整。minmax()函数: 设置行高的最小值和最大值。
例如：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
/*
- grid-auto-rows: 自动创建的行的默认高度
- minmax(100px, auto): 行的最小高度是100像素，最大高度根据内容自动调整
*/
}这段代码会创建一个响应式的网格布局，它会自动创建行，并且每行的最小高度是100像素。 如果内容超过了100像素，行的高度会自动增加，以容纳所有内容。
六、Grid的“魔法”：grid-auto-flow
有时候，我们只想定义一些固定的行和列，然后让剩下的元素自动排列到网格中。 grid-auto-flow 属性就是用来控制这种自动排列行为的。
它可以接受以下几个值：
row(默认值): 按照从左到右、从上到下的顺序依次填充网格。 如果当前行已经满了，就自动换到下一行。column: 按照从上到下、从左到右的顺序依次填充网格。 如果当前列已经满了，就自动换到下一列。dense: 尝试填补网格中的空白。 如果某个元素无法放到当前位置，Grid会尝试把它放到前面的空白位置，以尽可能地减少空白。 这个值可以和row或column组合使用，例如grid-auto-flow: row dense;。
例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
grid-auto-flow: row dense;
/*
- grid-template-columns: 定义了三列
- grid-template-rows: 定义了两行
- grid-auto-flow: row dense: 按照从左到右、从上到下的顺序填充网格，并尝试填补空白
*/
}这段代码定义了一个3×2的网格，然后让剩下的元素自动排列到网格中，并尽可能地填补空白。
七、Grid的“小助手”：gap
在Grid布局中，元素之间常常需要一些间距，这时就可以使用 gap 属性。
row-gap: 设置行之间的间距。column-gap: 设置列之间的间距。gap: 同时设置行和列之间的间距，相当于row-gap和column-gap的简写形式。
例如：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
/*
- gap: 20px: 设置行和列之间的间距都是20像素
*/
}这段代码会给Grid中的所有元素之间添加20像素的间距，让页面看起来更加整洁。
八、Grid的“进阶玩法”：命名网格区域
除了使用数字来定位网格元素，Grid还支持使用命名网格区域。 这种方式可以让代码更加语义化，更容易理解和维护。
首先，使用 grid-template-areas 属性定义网格区域的名称。 例如：
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
/*
- grid-template-areas: 定义网格区域的名称
- 每个字符串代表一行，每个单词代表一个区域
- 相同的单词表示合并为一个区域
*/
}这段代码定义了一个包含header、nav、main、aside和footer五个区域的网格。
然后，使用 grid-area 属性将元素放到对应的区域。 例如：
.header {
grid-area: header;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}这样，就可以通过区域名称来控制元素的位置，而不需要记住复杂的数字。
九、总结：Grid，你的页面布局利器
总而言之，CSS Grid是一个非常强大的布局工具，它可以让你轻松地创建复杂的响应式布局。 掌握了 grid-template-columns、grid-template-rows、grid-column、grid-row、auto-fit、auto-fill、grid-auto-rows、grid-auto-flow 和 gap 这些属性，你就可以像一位经验丰富的建筑师一样，自由地规划你的页面布局，让你的页面像变形金刚一样灵活地适应各种屏幕尺寸和内容变化。
记住，熟能生巧！ 多练习，多尝试，你就能发现Grid的更多“魔法”，让你的页面布局更加出色！ 祝各位前端同僚们在Grid的世界里玩得开心！