css常用布局之grid布局

Grid 布局是一个二维的布局系统，可以同时处理行和列，使其非常适合复杂的页面布局。以下是 Grid 的一些关键概念：

1. 容器和项：

   • 启用 Grid 布局的容器称为 grid 容器。
   • 容器内的所有子元素自动成为 grid 项。

2. 网格线和单元格：

   • 网格线是定义网格大小和位置的线。
   • 单元格是两条水平网格线和两条垂直网格线的交叉区域。

3. 属性：

   • display: grid; 将容器设置为 grid 容器。
   • grid-template-columns 和 grid-template-rows 属性定义了网格的列和行的大小。
   • grid-template-areas 属性允许你为网格定义区域。
   • grid-gap（或 gap）属性定义了网格项之间的间距。
   • grid-column 和 grid-row 属性用于放置 grid 项在网格线上。

4. 线和区域：

   • 你可以使用 grid-template-areas 来给网格线命名，这有助于在放置 grid 项时引用这些线。
   • grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性用于指定 grid 项在网格线上的开始和结束位置。

5. 放置项：

   • justify-items 和 align-items 属性用于在网格容器内对齐 grid 项。
   • justify-content 和 align-content 属性用于在网格容器内对齐整个网格。

6. 子网格：

   • Grid 允许你创建子网格，这意味着你可以在一个 grid 项内创建另一个 grid 布局。