最近一直在折腾页面布局这块儿，之前用那些老法子，比如浮动（float）啥的，搞一些稍微复杂点的排版，那代码写起来真是头疼，对齐调半天。后来 Flexbox 出来，用着是方便不少，特别是一行或者一列的那种布局，简直是神器。但是，有时候想搞个更复杂点的，比如像杂志那样，有行有列，划分得整整齐齐的，Flexbox 就感觉有点儿不够用，它主要还是管一维方向的事儿。
就在我琢磨这事儿的时候，听说有个叫 Grid 的玩意儿，说是专门搞二维布局的，能同时管行和列。我当时就觉得，这可能就是我想要的，得试试看。
于是我就开始动手实践。
一开始嘛我就找个简单的页面结构来练手。先是创建一个容器，比如一个大的 `div`。然后最关键的一步，就是给这个容器加上 `display: grid;` 这行样式。加上这句，浏览器就知道，，这里面的东西要用网格来排。
接着就得琢磨怎么划分格子。这就用到 `grid-template-columns` 和 `grid-template-rows` 这两个属性。比如我想搞个三列等宽的布局，我就写 `grid-template-columns: 1fr 1fr 1fr;`。这个 `fr` 单位挺有意思的，它代表可用空间的一份，这样写就是三列平分空间，很方便。行高也类似，用 `grid-template-rows` 来定。
格子画好，下一步就是把内容块儿往里面放。我试下，如果不特别指定，它们会按照代码顺序自动填满格子，一行排满就排下一行。
但 Grid 真正强大的地方在于可以精确控制。
我想让某个块儿，比如说侧边栏，占据第一列，并且跨两行。这时候就得用上 `grid-column-start`、`grid-column-end`、`grid-row-start`、`grid-row-end` 这些。比如指定它从第一列开始，到第二列结束（不包含第二列），从第一行开始，到第三行结束。写起来大概像 `grid-column: 1 / 2; grid-row: 1 / 3;` 这样。当然还有更简便的 `grid-area` 属性，可以给区域起名字，但我刚开始还是习惯用数字指定线条。
实践过程中，我还发现一个特别好的东西，就是 `gap` 属性（以前也叫 `grid-gap`）。它可以直接设置行与行、列与列之间的间距，比如 `gap: 10px;` 就行。这比以前给每个元素单独设置 `margin`，还要处理边距重叠或者父容器 `padding` 之类的问题，简直省心太多，代码也干净。
整个折腾下来，感觉最深的就是：
- Grid 确实是为二维布局而生的，行和列同时控制，思路特别清晰。
- 对于那种整个页面的大框架布局，比如头部、侧边栏、主内容区、脚部这种，用 Grid 来划分区域，简直是绝配。
- 那个 `fr` 单位真的好用，自适应布局方便多。
- 用 `gap` 设置间距，代码清爽，维护起来也容易。
刚开始接触，有些属性和概念也得花点时间去理解和记忆，比如那些线条编号、`fr` 单位的具体表现等等。但一旦上手，做出来的布局效果是真不错，而且代码量相对以前可能还少，结构也更清晰明。
如果要做复杂的页面结构，我肯定会优先考虑用 Grid 来实现。感觉这玩意儿确实是现代网页布局的一个大利器，值得花时间去掌握。
还没有评论，来说两句吧...