GRID布局
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
grid布局预热
-
容器和项目
<!-- 以上代码section为容器、div为项目 (项目不包括p标签) -->
-
行和列
容器里面的水平区域称为"行",垂直区域称为"列"。 -
单元格
行和列的交叉区域,称为"单元格"。