CS网格布局

学习目标

---

• 掌握网格常用属性与值

• 能够使用网格完成课堂案例及作用

CSS Grid(网格) 布局

---

CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上，进而快速、便捷的对页面结构进行布局，提高工作效率

“flexbox” 是一维的布局，是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局，一行或者一列。

相比较 “Grid网格布局”，则是二维布局可以同时处理行和列上的布局

通常适用于布局页面主要的区域布局或小型组件

兼容

---

ie10、ie11支持带前缀-ms-

基本概念

---

容器与项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）

单元格

行和列的交叉区域，称为"单元格"（cell）

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，

比如三行就有四根水平网格线。

网格属性

---

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

容器属性

---

设置为网格布局

• 设置为块级网格

div {

display: grid;

}

• 设置为行级网格

div {

display: inline-grid;

}

注意

• 不是网格的直接子元素，不参与网格布局

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

列宽与行高

grid-template-columns网格布局中列的数量（和宽度）

grid-template-rows网格布局中行的数量（和高度）