CSS-Grid（网格）布局

CSS Grid（网格）布局是一种二维布局系统。与flexbox布局系统不同，它被设计为管理网格中的项目，而不是像flexbox那样管理线性布局。

以下是一些CSS Grid的基本使用方法：

1. 创建一个网格容器：

.container {
  display: grid;
}

2. 定义网格的列和行：

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;  /* 定义三列，每列宽度为100px */
  grid-template-rows: 50px 50px 50px;       /* 定义三行，每行高度为50px */
}

3. 使用网格间隔：

.container {
  display: grid;
  grid-column-gap: 10px;  /* 列间隔为10px */
  grid-row-gap: 10px;     /* 行间隔为10px */
}

4. 使用命名网格线：

.container {
  display: grid;
  grid-template-columns: [first] 100px [second] 100px [third] 100px [fourth];
  grid-template-rows: [header] 50px [content] 50px [footer];
}

5. 将项目放置在网格中：

.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

6. 使用简写属性放置项目：

.item1 {
  grid-area: 1 / 1 / 2 / 2;  /* 行开始 / 列开始 / 行结束 / 列结束 */
}

7. 使用自动填充：

.container {
  display: grid;
  grid-template-columns: 100px auto 100px;  /* 第二列自动填充剩余空间 */
}

8. 设置重复的网格线：

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);  /* 三列，每列宽度为100px */
}

9. 设置最小和最大网格大小：

.container {
  display: grid;
  grid-template-columns: 100px minmax(150px, 1fr);  /* 最小150px，最大1fr */
}

10. 创建网格区域：

.container {
  display: grid;
  grid-template-areas: 'header header header'
                       'nav    main   sidebar'
                       'footer footer footer';
}

在实际应用中，你可以根据需要将这些属性和值组合起来，以创建灵活的网格布局。