CSS中的网格布局（Grid Layout）容器属性详解

今天我们来详细讲解CSS网格布局中的容器属性。网格布局是一个二维布局系统，通过设置容器属性可以定义网格的结构和行为。

1. 网格布局基础概念
网格布局由网格容器（直接父元素）和网格项目（直接子元素）组成。将元素设置为display: grid后，它就变成了网格容器，其直接子元素自动成为网格项目。

2. display属性
这是启用网格布局的基础属性：

.container {
  display: grid; /* 生成块级网格容器 */
  /* 或者 */
  display: inline-grid; /* 生成行内网格容器 */
}

块级网格容器会占据整行宽度，而行内网格容器只会占据内容所需宽度。

3. 定义网格轨道：grid-template-columns和grid-template-rows
这两个属性用于显式定义网格的列和行轨道：

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 三列：100px, 200px, 100px */
  grid-template-rows: 50px 100px; /* 两行：50px, 100px */
}

4. 轨道尺寸单位
可以使用多种单位定义轨道尺寸：

• 固定单位：px、em等
• 百分比：基于容器尺寸的百分比
• fr单位：弹性比例单位
• auto：自动分配可用空间
• min-content/max-content：基于内容的最小/最大尺寸

5. 重复轨道：repeat()函数
简化重复轨道定义：

.container {
  grid-template-columns: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr */
  grid-template-rows: repeat(2, 100px); /* 等同于 100px 100px */
}

6. 网格间距：gap属性
控制网格项目之间的间距：

.container {
  gap: 10px; /* 行列间距都为10px */
  /* 或者分别设置 */
  row-gap: 10px;
  column-gap: 20px;
}

7. 网格区域模板：grid-template-areas
通过命名区域来定义网格布局：

.container {
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.item1 { grid-area: header; }
.item2 { grid-area: sidebar; }
/* 其他项目对应区域 */

8. 隐式网格控制：grid-auto-columns和grid-auto-rows
当网格项目超出显式定义的网格时，这些属性控制隐式创建的轨道尺寸：

.container {
  grid-template-columns: 100px 100px;
  grid-auto-rows: 50px; /* 隐式创建的行高度为50px */
}

9. 自动流方向：grid-auto-flow
控制网格项目的自动排列方式：

.container {
  grid-auto-flow: row; /* 默认，按行排列 */
  grid-auto-flow: column; /* 按列排列 */
  grid-auto-flow: dense; /* 密集排列，尝试填充空白 */
}

10. 对齐方式：justify和align系列属性
控制网格项目在容器内的对齐：

• justify-content：整个网格在容器内的水平对齐
• align-content：整个网格在容器内的垂直对齐
• justify-items：所有项目在单元格内的水平对齐
• align-items：所有项目在单元格内的垂直对齐

11. 实际应用示例

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas: 
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 15px;
  height: 100vh;
}

通过这些容器属性的灵活组合，可以创建出各种复杂的二维布局，实现真正响应式和灵活的页面结构。