css常用布局之grid布局
Grid 布局是一个二维的布局系统，可以同时处理行和列，使其非常适合复杂的页面布局。以下是 Grid 的一些关键概念：
-
容器和项：
- 启用 Grid 布局的容器称为 grid 容器。
- 容器内的所有子元素自动成为 grid 项。
-
网格线和单元格：
- 网格线是定义网格大小和位置的线。
- 单元格是两条水平网格线和两条垂直网格线的交叉区域。
-
属性：
display: grid;将容器设置为 grid 容器。grid-template-columns和grid-template-rows属性定义了网格的列和行的大小。grid-template-areas属性允许你为网格定义区域。grid-gap（或gap）属性定义了网格项之间的间距。grid-column和grid-row属性用于放置 grid 项在网格线上。
-
线和区域：
- 你可以使用
grid-template-areas来给网格线命名，这有助于在放置 grid 项时引用这些线。 grid-column-start、grid-column-end、grid-row-start和grid-row-end属性用于指定 grid 项在网格线上的开始和结束位置。
- 你可以使用
-
放置项：
justify-items和align-items属性用于在网格容器内对齐 grid 项。justify-content和align-content属性用于在网格容器内对齐整个网格。
-
子网格：
- Grid 允许你创建子网格，这意味着你可以在一个 grid 项内创建另一个 grid 布局。