网格布局(Grid)是最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
上图这样的布局,就是 Grid 布局
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。
Flex 布局是轴线布局,只能指定”项目”针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”,产生单元格,然后指定”项目所在”的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
容器和项目
采用网格布局的区域,称为”容器”(container)。容器内部采用网格定位的子元素,称为”项目”(item)。
注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的
元素就不是项目。Grid 布局只对项目生效。
行和列
容器里面的水平区域称为”行”(row),垂直区域称为”列”(column)。
单元格
行和列的交叉区域,称为”单元格”(cell)。
正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。