CSS Grid：用想象力搭积木，横竖都精彩
嘿，各位看官，咱们今天聊点儿好玩的：CSS Grid布局！说起CSS布局，那真是一部血泪史。从最开始的 <table> 到后来各种 float、position，简直就是“条条大路通罗马，但条条路都坑坑洼洼”。好不容易盼来了Flexbox，感觉世界清净了不少，但Flexbox毕竟是一维布局，想搞点儿复杂的，还是有点儿力不从心。
这时候，CSS Grid就像一位救世主，带着光环出现了。它强大的二维布局能力，简直能让你在网页上“为所欲为”。今天咱们就来聊聊Grid布局中最核心的概念之一：grid-template-columns 和 grid-template-rows。这两个属性，就像是Grid布局的骨架，定义了网格的轨道，决定了你的网页内容将如何排列。
想象力是第一生产力：打造属于你的“格子间”
你可以把Grid布局想象成一个巨大的格子间办公室。grid-template-columns 定义了办公室里有多少列，每列有多宽；grid-template-rows 则定义了有多少行，每行有多高。有了它们，你就有了控制整个办公室布局的权力。
举个栗子，你想做一个三列两行的网格布局，代码可以这么写：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列，每列宽度相等 */
grid-template-rows: 150px 200px; /* 两行，第一行高150px，第二行高200px */
}这段代码的意思是：我创建了一个容器 .container，把它变成了一个Grid布局。然后，我用 grid-template-columns 定义了三列，每列宽度都占据剩余空间的1/3（1fr）。用 grid-template-rows 定义了两行，第一行高150像素，第二行高200像素。
各种单位，各显神通：像素、百分比、fr…傻傻分不清？
grid-template-columns 和 grid-template-rows 可以接受各种各样的单位，比如像素（px）、百分比（%）、em、rem，甚至还有Grid布局专属的 fr 单位。
-
像素（
px）： 这是最实在的单位，直接指定宽度或高度。比如grid-template-columns: 100px 200px 300px;就表示第一列宽度100像素，第二列200像素，第三列300像素。 -
百分比（
%）： 百分比是相对于容器的宽度或高度而言的。比如grid-template-columns: 25% 50% 25%;就表示第一列和第三列分别占据容器宽度的25%，第二列占据50%。 -
fr： 这个单位是Grid布局的精髓之一，它代表的是“fraction”（分数）。fr会将剩余空间进行分配。 比如，grid-template-columns: 1fr 2fr 1fr;表示将剩余空间分成四份，第一列和第三列各占一份，第二列占两份。 -
auto：auto让轨道尺寸自动适应内容。如果内容很多，轨道就会变大；内容很少，轨道就会变小。它就像一个灵活的“变色龙”，适应性极强。 -
minmax()： 这个函数允许你指定轨道的最小和最大尺寸。比如grid-template-columns: minmax(100px, 200px) 1fr;表示第一列最小宽度是100像素，最大宽度是200像素，剩余空间由第二列的1fr占据。
重复的力量：repeat() 函数，让代码更简洁
如果你需要创建很多重复的列或行，用 repeat() 函数就方便多了。比如，你想创建12列，每列宽度都是 1fr，可以这么写：
grid-template-columns: repeat(12, 1fr);这段代码比手动写12个 1fr 要简洁多了吧？ repeat() 函数还可以接受更复杂的参数。比如，你可以定义一个重复的模式：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));这段代码的意思是：自动填充列，每列最小宽度是200像素，最大宽度是 1fr。 auto-fill 会尽可能多地填充列，直到容器放不下为止。
命名你的轨道：让代码更易读
你可以给 grid-template-columns 和 grid-template-rows 定义的轨道命名。这可以让你的代码更易读，也方便你在后续的布局中引用这些轨道。
.container {
display: grid;
grid-template-columns: [col-start] 1fr [col-mid] 1fr [col-end];
grid-template-rows: [row-start] 150px [row-mid] 200px [row-end];
}在这段代码中，我们给列轨道起了三个名字：col-start、col-mid、col-end；给行轨道起了三个名字：row-start、row-mid、row-end。 这些名字可以让你在后面的布局中更方便地定位元素。
auto-fill vs auto-fit：两个“自动填充”的兄弟
auto-fill 和 auto-fit 都是 repeat() 函数的参数，它们都可以用来自动填充轨道。但它们之间有一个微妙的区别：
auto-fill： 会尽可能多地填充轨道，即使有些轨道是空的。auto-fit： 会折叠空的轨道，让剩余的轨道占据更多的空间。
你可以把 auto-fill 想象成一个贪婪的家伙，它会尽可能多地占位置，即使它自己用不上。而 auto-fit 则是一个谦虚的家伙，它会把多余的空间让给别人。
实际应用：从简单的博客布局到复杂的数据仪表盘
grid-template-columns 和 grid-template-rows 的应用场景非常广泛。
-
简单的博客布局： 你可以用Grid布局轻松创建一个两栏或三栏的博客布局。左边是文章列表，右边是侧边栏，中间是文章内容。
-
响应式图片画廊： 你可以用
repeat(auto-fit, minmax(200px, 1fr))创建一个响应式的图片画廊。图片会自动排列，并根据屏幕大小进行调整。 -
复杂的数据仪表盘： Grid布局非常适合创建复杂的数据仪表盘。你可以用不同的轨道来放置各种图表、表格和指标，让整个仪表盘看起来清晰有序。
一些小技巧，让你的Grid布局更上一层楼
-
善用
fr单位：fr单位是Grid布局的利器，它可以让你轻松创建灵活的布局。 -
考虑使用
minmax()函数：minmax()函数可以让你控制轨道的最小和最大尺寸，防止内容溢出。 -
尝试使用
auto-fill和auto-fit： 这两个参数可以让你创建响应式的布局，适应不同的屏幕大小。 -
多尝试，多练习： 熟能生巧，只有多尝试、多练习，才能真正掌握Grid布局。
总结：Grid布局，开启你的布局新世界
grid-template-columns 和 grid-template-rows 是CSS Grid布局的基础，掌握它们，你就掌握了Grid布局的钥匙。 它们就像是乐高积木，你可以用它们搭建各种各样的网页布局，从简单的列表到复杂的仪表盘，一切皆有可能。
记住，想象力是第一生产力。 大胆发挥你的想象力，用Grid布局打造属于你的精彩网页！ 祝你在Grid布局的世界里玩得开心！