CSS Grid 布局：网格容器、网格项及响应式设计

# CSS Grid 布局
## 网格容器  Grid Container 
- 定义
  - 使用 `display: grid` 或 `display: inline-grid` 创建网格容器。
- 功能
  - 定义网格项放置的区域。
  - 控制网格的整体结构和行为。
- 属性
  - grid_template_columns
    - 定义列的宽度
      - 可以使用具体的长度（如px, em）
      - 可以使用比例（如fr）
  - grid_template_rows
    - 定义行的高度
      - 同上。
  - grid_template_areas
    - 通过命名定义网格区域
      - 通常与 `grid_area` 属性配合使用。
  - grid_template
    - 简写属性
      - 同时设置 `grid_template_columns`, `grid_template_rows` 和 `grid_template_areas`。
  - grid_auto_columns 和 grid_auto_rows
    - 定义隐式网格轨道的尺寸
      - 适用于超出显式定义的网格项。
  - grid_auto_flow
    - 控制网格项自动填充
      - 值可以是 `row`, `column` 或 `dense`。
## 网格项  Grid Items 
- 定义
  - 直接位于网格容器内的子元素。
- 定位
  - grid_column_start, grid_column_end, grid_row_start, grid_row_end
    - 指定网格项开始和结束的网格线。
  - grid_column 和 grid_row
    - 简写属性
      - 分别设置列和行的位置。
  - grid_area
    - 作为简写属性
    - 可以引用 `grid_template_areas` 中定义的区域名称。
- 跨越多轨
  - span
    - 关键字
      - 指定网格项跨越的轨道数量。
## 对齐与定位
- 对齐网格项
  - justify_items 和 align_items
    - 控制所有网格项的水平和垂直对齐方式。
  - place_items
    - 简写属性
      - 同时设置 `justify_items` 和 `align_items`。
  - justify_self 和 align_self
    - 为单个网格项设置对齐方式。
  - place_self
    - 简写属性
      - 同时设置 `justify_self` 和 `align_self`。
- 对齐网格容器
  - justify_content 和 align_content
    - 控制整个网格内容的对齐方式。
  - place_content
    - 简写属性
      - 同时设置 `justify_content` 和 `align_content`。
## 设置网格
- 定义网格模板
  - grid_template_columns 和 grid_template_rows
    - 分别定义列和行的宽度和高度。
  - grid_template_areas
    - 通过命名来定义网格区域。
- 简写属性
  - grid_template
    - 同时设置 `grid_template_columns`, `grid_template_rows` 和 `grid_template_areas`。
- 设置自动填充
  - grid_auto_columns 和 grid_auto_rows
    - 定义隐式网格轨道的尺寸。
  - grid_auto_flow
    - 控制如何自动放置网格项
      - 可以是 `row`, `column` 或 `dense`。
## 响应式设计
- 媒体查询
  - 根据屏幕尺寸调整网格布局。
- 弹性单位
  - 使用 `fr` 单位
    - 创建弹性网格轨道。
- 最小最大函数
  - minmax
    - 确保轨道尺寸在指定范围内。
- repeat 函数
  - 简化重复轨道模式的定义。
- auto_fit 和 auto_fill
  - 根据可用空间自动调整轨道数量。
## 最佳实践
- 简洁的代码
  - 使用简写属性和函数减少冗余。
- 语义化
  - 给网格区域赋予有意义的名字
    - 提高代码可读性。
- 浏览器兼容性
  - 检查不同浏览器对 CSS Grid 的支持情况。
- 回退方案
  - 为不支持 Grid 的老版浏览器提供替代布局方案。