这是我参与「第四届青训营 」笔记创作活动的的第2天

昨天参与青训营课程中，介绍的 Grid 布局让我印象深刻，发现自己确实没有系统地学习过这方面的内容

回想起 2021 前端最常访问的页面竟然是 Grid 布局生成器，可见此功能既强大又难记

所以我总结了网格布局的各个属性与用法，希望能一起彻底掌握网格布局。

网格布局

想启用网格布局很简单，只需要在改变父容器的显示类型 display: grid

与 flex 不同的是，容器只要启用 flex 布局，其内部元素就会被自动转换成行内块类型，并排列到一行中；而 grid 并不会如此，仅改变父元素显示类型是不生效的，还需要其他的属性配置。

网格分区

既然要网格布局，首先要对网格进行分区，与此相关的有两个属性，定义在容器身上：

• grid-template-rows：对网格进行的行分区
• grid-template-columns：对网格的列分区

在设置这些分区属性可以使用一个特殊的弹性单位 fr，每个使用此单位属性的网格轨道会按比例分配剩余的可用空间。

grid 还提供了一个计算属性来限制弹性单位的数值：minmax()

本来第二行应该和第一行评分剩下的 150px 的高度的，但由于第二行设置了 minmax(100px,1fr)，最小值为 100px，所以留给第一行的就只有 50px 了

分配分区

有时候，我们的布局中，有些元素占用会占用多个分区，这需要在子元素身上设置属性：

• grid-row-start：行分区的起始位置
• grid-row-end：行分区的结束位置
• grid-column-start：列分区的起始位置
• grid-column-end：列分区的起始位置

这四个属性也可以去掉后缀使用缩写 grid-row 和 grid-column，中间用 / 隔开

要强调的是，定义的是线的位置，grid-row: 1 / 3 表示从横向的第一条线到第三条线，也就是占用前两行

该属性可以传递负数，表示从末尾开始计数；结束位置可以传递 span [num]，表示相对开始位置计数

命名分区

有时候数线的方式并不直观，可以采取命名再分配的方式，与其相关的有两个属性：

• grid-template-areas：在父容器上命名分区，传一个字符串矩阵
• grid-area：为子元素分配命名分区

使用起来既简单又易读，不打算使用的地方分配一个 . 就好了

需要注意的是，分区必须是一个矩形，写成这样子的话属性是不会生效的

grid-template-areas:
  'one two two'
  'one one four'
  'three five four';

其他属性

Grid 布局还有很多与 Flex 布局相同的属性 align-items、justify-content、align-self……这里就不作介绍了

说两个 Grid 父容器上独有的属性：

• grid-auto-flow：设置子元素未指明分区时的排列方式
• grid-gap：设置分区的间隔距离

至此，网格布局的内容就总结完了，希望能帮助到大家

最后分享一个生成器，可以快速生成 CSS 布局代码

结语

如果喜欢或有所帮助的话，希望能点赞关注，鼓励一下作者。

如果文章有不正确或存疑的地方，欢迎评论指出。