Grid 布局不完全指北

PS: 文章是个人学习笔记,阅读需要对几种布局方式尤其是Flexbox布局有一些了解。

网格布局用于将页面分割成数个主要区域,用来定义组件内部元素间大小、位置和图层之间的关系。它是二维的系统,意味着可以同时操作行和列。

浏览器支持情况:

使用网格布局首先要声明类型(注意在Grid布局里column, float, clear 和 vertical-align 不会生效。)

1 grid-template-columns 表示每一行如何划分,grid-template-rows 表示每一列如何划分

可以给每一行列加上名字,名字可以多个

如果有重复的地方可以使用repeat表示,以下两句意思一样

可以使用fr来代表一部分

2 grid-template-areas

3 grid-template 是上面三个属性合并的简写,语法格式为

下面两种写法效果一样

4 grid-column-gap 和 grid-row-gap 表示每行每列之间的间隔

参考:

http://chris.house/blog/a-complete-guide-css-grid-layout/

https://css-tricks.com/snippets/css/complete-guide-grid/

https://caniuse.com

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180112G06UHE00?refer=cp_1026

相关快讯

扫码关注云+社区