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.」

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180901G1DLBA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励