CSS Grid 网格布局教程(3容器属性:display)

君山

三、容器属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。

3.1 display 属性

display: grid指定一个容器采用网格布局。

1. div {
   
2.   display: grid;
   
3. }

复制代码

上图是display: grid的效果。

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

1. div {
   
2.   display: inline-grid;
   
3. }

复制代码

上面代码指定div是一个行内元素，该元素内部采用网格布局。



[foo 和 bar 是前后元素位置]

上图是display: inline-grid的效果。

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

墨裔

返回目录 - CSS Grid 网格布局教程 - 汇总目录
http://www.zgxsh.com/forum.php?mod=viewthread&tid=70589