是什么

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列
擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系
image.png
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

基本概念

  • 容器和项目

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

  • 行和列

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

  • 单元格

行和列的交叉区域，称为”单元格”（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

  • 网格线

划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

属性

Grid 布局属性可以分为两大类：

  • 容器属性，

  • 项目属性

    容器属性：

  • display 属性

  • grid-template-columns 属性，grid-template-rows 属性
  • grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
  • grid-template-areas 属性
  • grid-auto-flow 属性
  • justify-items 属性， align-items 属性， place-items 属性
  • justify-content 属性， align-content 属性， place-content 属性

  • grid-auto-columns 属性和 grid-auto-rows 属性

    项目属性

  • grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

  • grid-area 属性
  • justify-self 属性、align-self 属性以及 place-self 属性