Skip to main content

CSS Grid 布局速查表

1. GRID CONTAINER (网格容器属性)​

应用于父元素

① 定义轨道​

  • 属性：
    • grid-template-rows: <track size>*
    • grid-template-columns: <track size>*
  • 说明：用于建立网格的行轨道和列轨道。为每个轨道设置一个长度单位。可以使用任何单位，fr 单位用于填充剩余空间。

② 创建间距 (Gaps)​

  • 属性：
    • row-gap: 0 | <length>
    • column-gap: 0 | <length>
    • gap: 0 | <length> (缩写形式)
  • 说明：在轨道之间创建空白空间（沟槽）。

③ 单元格内对齐 (项目对齐)​

  • 属性：
    • justify-items: stretch | start | center | end
    • align-items: stretch | start | center | end
  • 说明：在单元格内部沿**水平（水平）/ 垂直（垂直）**方向对齐项目。

④ 整体网格对齐 (内容对齐)​

  • 属性：
    • justify-content: start | center | end | ...
    • align-content: start | center | end | ...
  • 说明：在容器内对齐整个网格。仅当容器大于网格总面积时生效。

2. GRID ITEMS (网格项目属性)​

应用于子元素

① 放置项目​

  • 属性：
    • grid-column: <start line> / <end line> | span <number>
    • grid-row: <start line> / <end line> | span <number>
  • 说明：根据网格线编号将项目放置在特定位置。span 关键字可让项目跨越多个单元格。

② 覆盖对齐方式​

  • 属性：
    • justify-self: stretch | start | center | end
    • align-self: stretch | start | center | end
  • 说明：针对单个项目覆盖容器统一设置的 justify-items 或 align-items 属性。

3. 核心概念术语表​

术语翻译描述
Grid Lines网格线构成网格结构的水平和垂直分割线。
Grid Track网格轨道两条相邻网格线之间的空间（即一行或一列）。
Grid Cell网格单元格网格中最小的单元（类似于表格的单元格）。
Gutters (Gaps)间隙轨道之间的空隙。

💡 注意：此列表并非详尽无遗，但足以应对基础开发。