3. 语法

1. 块级的网格。

   .demo{ display:grid }

2. 内联级的网格。

   .demo{ display:inline-grid; }

容器包含属性如下

grid-template 是 grid-template-columns 、grid-template-rows、 grid-template-areas 缩写。

grid 是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow的合并缩写。

提示：gird 属性很复杂因此不推荐grid 的缩写

项目包含属性介绍

4. 兼容性

5. 实例

本小节暂时不对父容器和子容器内的属性进行详细的实例使用展示，仅对 display 属性进行效果区分，可以从下一小节开始其他内容的学习。

1. 创建一个块级的 Gird 布局。

   1

   2

   3

   4

通过下面的设置：

.demo{
    display: grid;
    grid-template-columns:100px 100px;
    grid-template-rows:100px 100px;
    border:1px solid #eee
}
.item:nth-of-type(1){
    background: red;
}
.item:nth-of-type(2){
    background: green;
}
.item:nth-of-type(3){
    background: purple;
}

效果图

块级 Grid 布局效果图

1. 创建内联级的 Gird 布局。

   1

   2

   3

   4
   
   慕课网学习

   .demo{ display: inline-grid; grid-template-columns:100px 100px; grid-template-rows:100px 100px; border:1px solid #eee } .item:nth-of-type(1){ background: red; } .item:nth-of-type(2){ background: green; } .item:nth-of-type(3){ background: purple; }

效果图

内联 Grid 布局效果图

6. 小结

1. Grid 布局是二维布局原因就是项目所在的单元格是由行和列产生的。
2. 网格线的开始位置在容器的最顶端和最左边。
3. 使用区域命名之后会影响网格线的名称会变成 区域名-star、区域名-end
4. 可以把 columns 理解为高度，rows理解为宽度这样便于理解。