哎呦喂，CSS Grid 布局，这玩意儿听起来挺较高较大上的，其实也没那么不容简单。别看那一些教程写得跟天书一样， 麻了... 我给你简洁说一下保证你听完也能用起来。我这说的都是实实在在的，没啥花里胡哨的。

CSS Grid 啥意思啊？

CSS Grid，简洁来说就是让你把网页上的元素排列成网格状的工具。就像你画画的时候用网格线一样，你能够把元素放到不同的格子里面去。比以前用的浮动布局哪些的要良好用更多了省心省力。

grid-template-areas 是哪些神仙属性？

哪怕... grid-template-areas 当前这个属性，简直就是 CSS Grid 的灵魂！它让你能像画草图一样定义你的布局结构。不用一个个的行和列去指定位置了直接用文字描写就行了！是不是很酷？

怎么用当前这个属性啊？

当前这个属性就像一个地图一样，告诉你各个区域应当放在哪里。你需要按照行和列来写东西：

• 每一行代表一行比如 header header sidebar main footer footer 这就表示你有一个头部， 然后是两个侧边栏，再来一个主内容区，最后再来看是两个页脚。
• 每一个单词代表一个区域header, sidebar, main 这一些都是区域的名字。
• 空格表示区域的较大较小如果一个区域占用了两列的位置，你就用空格隔开两个名字就行了。比如 header header 就表示头部占用了两列的位置。
• 点 "." 表示空白如果你不想让某个格子体现任意内容，能够用点 来代替。这样能够简化你的代码结构。

举个例子吧：

对应的 CSS 代码就有可能是这样：

css .container { display: grid; /* 先设置成 grid 布局 / grid-template-areas: "header header header" / 定义行结构 / "sidebar main main" / 定义第二行结构 / "footer footer footer"; / 定义第三行结构 */ }

.header { grid-area: header; } /* 将 header 分配到 header 位置 / .sidebar { grid-area: sidebar; } / 将 sidebar 分配到 sidebar 位置 / .main { grid-area: main; } / 将 main 分配到 main 位置 / .footer { grid-area: footer; } / 将 footer 分配到 footer 位置 */

grid-template-rows 和 grid-template-columns 你也得了解！

虽然grid-template-areas能够帮你迅速定义整体布局,但是你还需要用到grid-template-rows和grid- 研究研究。 template-columns来控制每一行的较高度和每一列的较宽度哦! 如果不指定的话,默认会是自动的,有可能会引起页面体现不美观

它们分别是哪些意思呢?

• 这事儿我可太有发言权了。 grid-template-rows: 控制网格的每一行的尺寸.举个例子:1fr 2fr 1fr, 表示行占1份空间范围. fr 是 fractional unit 的缩写, 代表剩余空间范围的比例.

• 恳请大家... grid-template-columns: 控制网格的每一列的尺寸,用法跟 grid - template - rows 一样

我咋觉得这还挺简洁的？

是的！真实的挺简洁的！ 你不需要记住繁杂的行列索引啦！ 直接根据你的想法把区域命名良好就行了。 ICU你。 而且这种方式写起来也很清晰简单懂 ，以后修改起来也方便更多了 。

有啥进阶技巧吗？

从头再来。 当然有啦! 如果你需要让你的网页在不同尺寸的屏幕上都能正常体现,就能够采用媒体平台查询 来调整你的 grid - template - areas 。 举个例子:

css @media { /* 当屏幕较宽度较小于等于768像素时 / .container { / 对 .container 进行修改 / grid = template = areas : "header" "main" "footer"; /简化为三列居中*/ } }，不忍直视。

哪些场景下用当前这个良好呢？

正常情况下 ， 当你的网页需要包含头部、侧边栏、主内容区、页脚等常见结构的时候 ，采用 grid - template - areas 会非常方便 。 它能帮你迅速构建语义化的布局 ， 让你的代码更加清晰简单懂 ，火候不够。。

最后再来看一下

总而言之 ， CSS Grid 的 grid - template - areas 是一个非常强较大较大的工具 ， 能让你轻巧松地实现各种繁杂的网页布局 。 话虽然是这么说… 虽然一启动有可能有点陌生 ， 但是只要更多练习几次 ， 就一定能掌握它！

从一个旁观者的角度看... 希望这篇文章能帮到你! 如果还有哪些问题 ,欢迎随时问我哦!