CSS Grid Layout 不完整指南
2017年1月20日
| 本文还没写完。。。
介绍
CSS Grid Layout
,即网格布局系统,旨在用最简单的方式改变用户界面。
CSS发展至今,最基础也最核心的部分是布局,从一开始的用黑科技float
进行多列布局,到后来的flex
布局的出现,再到现在想讲的Grid
布局系统,可以说大大加快网页布局的书写之外语义化也更加明确了。
兼容性
从下图看出,目前主流浏览器尚且不支持该属性(截至现在最新Chrome版本为55),所以想要体验Grid
属性请先打开chrome://flags/将experimental Web Platform features
开启。
示例一览
我们先从一个最经典的三列布局(左右固定宽度中间自适应)来看看如何用grid
实现:
|
语法
1.Grid Container
想让一个容器变成Grid
,只需要如下声明:
.container { |
属性 | grid | inline-grid | subgrid |
---|---|---|---|
说明 | 块状级别grid | 内联级别grid | 自身已经是一个grid item,同时声明自己是一个grid container |
注意:
column
,float
,clear
, 以及vertical-align
对声明了display: grid;
的元素无效。
2.Grid Items