CSS Grid 布局

阅读文本大概需要 5 分钟。

网格布局（CSS grid）是一种网页设计的新布局，目前许多主流浏览器已经支持了这一布局，对前端开发人员来说，是需要了解并学会使用的一种很方便快捷的布局。

HTML布局

上面的 HTML 就是一段简单的 grid 布局，我们先看看它的运行效果，其中我加了一些其他样式

现在，让我们为它加上网格布局代码：

突然间代码有点多，一个一个解释下。首先在父元素 div 中设置表示将其设置为网格布局；然后属性是设置网格中列的尺寸大小及其占据空间，上面的参数是表示左右各留 1fr 的距离，中间网格部分占据总共 1200px；接着顾名思义就是行的意思，规定以几行来呈现布局，可以看到上面有四个参数，分别为，所以整个布局总共有四行，每一行的高度为 1fr , fr 是一个单位，比 px 要大些。根据上面的描述可以看到目前的预览效果是这样：

Chrome 浏览器

也许细心的你已经发现了，上面的代码还有两个属性和,这两个属性官方文档里面解释了一大堆文字，我的简单理解是：规定网格布局中的区域，也就是每一行中放几个内容块。可以看到，我在 title、header、sidebar、content 和 footer 中都写上了一个属性：,然后在中把些模块名都写了上去，左右两边还多了两个，这是为什么呢？

浏览器中的效果

其实就是把网页分成了四列，左右两边的空白就对应上面的两个" . "，然后中间" title title "表示 title 这个 div 占了两列，而第三行中的" sidebar content "就是 sidebar 和 content 这两块各占一半平分，最后的 footer 也是占了两块的。

最后，附上网格布局常用属性的官方定义，供读者参考理解

grid-template-columns：定义网格列的线名称和跟踪大小调整功能。

grid-template-rows：该属性是基于网格行的维度，去定义网格线的名称和网格轨道的尺寸大小。

grid-template-areas：属性是 grid areas 在CSS中的特定命名.

grid areas：是一种对于 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 grid row 中指定一个网格项的大小和位置，继而确定 grid area 的边界。

grid-gap：指定行和列之间的间隙。

以上属性的定义来源于 MDN web ,谷歌翻译。

「Stay hungry，stay foolish.」

"关注、点赞、转发都是一种支持！"