CSS Grid 网格布局(入门)- display: grid

在 css grid 网格布局中,被设置为 grid 的称为网格容器,容器的直接子元素称为网格项。

/* 块元素 */ 
display : grid;

/* 行内元素 */
display: inline-grid;

设置为 grid 或 inline-grid 后,网格项默认为一列。 且网格项的 column、float、clear、vertical-align 等设置都将失效。

实例:

.wrap{
	display: grid;
	grid-template-columns: 50px 100px 150px;
	grid-template-rows: 60px 60px 60px;
}
网格布局行和列1 2-2

以上代码中设置了 grid-template-rows 3行高为60px, grid-template-columns 3列宽分别为 50px 100px 150px 的网格。

display: grid;是块元素,占满一行。 上图中,虚线代表网格线。可以看出网格小于网格容器。网格项占满网格单元。

查看实例

JavaScript 语法:

object.style.display = "grid" ;