概述

CSS Grid 布局是一个强大的二维布局系统，专门用于处理行和列的复杂网页布局。通过 display: grid 将元素定义为网格容器，开发者可以精确控制项目在网格中的位置和大小。

网格容器属性

1. 定义网格结构

• grid-template-columns：定义网格的列轨道大小和数量

  • 接受长度值（px、em、%）、fr单位（弹性系数）、minmax()函数等

  • 示例：grid-template-columns: 100px 1fr 2fr

• grid-template-rows：定义网格的行轨道大小和数量

  • 参数与grid-template-columns相同

  • 示例：grid-template-rows: 50px auto 100px

• grid-template-areas：通过命名网格区域来定义布局结构

  • 使用标识符定义可复用的布局模板

  • 示例：grid-template-areas: "header header" "sidebar content"

2. 隐式网格控制

• grid-auto-columns：定义隐式创建的列轨道大小

  • 当项目被放置到显式网格之外时自动生成

• grid-auto-rows：定义隐式创建的行轨道大小

  • 控制自动生成的行的高度

• grid-auto-flow：控制自动放置算法

  • row：按行依次填充（默认）

  • column：按列依次填充

  • dense：尝试填充网格中的空白

3. 间距与对齐

• gap / grid-gap：定义网格线之间的间距

  • row-gap：行间距

  • column-gap：列间距

  • 简写：gap: 行间距 列间距

• justify-items：沿行轴对齐网格项目

  • 值：start | end | center | stretch

• align-items：沿列轴对齐网格项目

  • 值：start | end | center | stretch

• place-items：align-items和justify-items的简写

  • 格式：place-items: <align-items> <justify-items>

• justify-content：当网格总大小小于容器时，沿行轴对齐整个网格

  • 值：start | end | center | stretch | space-around | space-between | space-evenly

• align-content：当网格总大小小于容器时，沿列轴对齐整个网格

  • 值与justify-content相同

网格项目属性

1. 项目定位

• grid-column-start：定义项目开始的列网格线

• grid-column-end：定义项目结束的列网格线

• grid-row-start：定义项目开始的行网格线

• grid-row-end：定义项目结束的行网格线

2. 简写属性

• grid-column：grid-column-start和grid-column-end的简写

  • 格式：grid-column: <start-line> / <end-line>

  • 示例：grid-column: 1 / 3 或 grid-column: span 2

• grid-row：grid-row-start和grid-row-end的简写

  • 格式与grid-column相同

• grid-area：

  • 可作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的简写

  • 格式：grid-area: <row-start> / <column-start> / <row-end> / <column-end>

  • 也可引用grid-template-areas中定义的区域名称

3. 项目对齐

• justify-self：沿行轴对齐单个网格项目

  • 值：start | end | center | stretch

• align-self：沿列轴对齐单个网格项目

  • 值与justify-self相同

• place-self：align-self和justify-self的简写

  • 格式：place-self: <align-self> <justify-self>

特殊单位和函数

• fr单位：表示网格容器中可用空间的一部分

  • 示例：1fr 表示一份可用空间

• minmax()函数：定义轨道大小的范围

  • 格式：minmax(最小值, 最大值)

  • 示例：minmax(100px, 1fr)

• repeat()函数：重复轨道模式

  • 格式：repeat(次数, 轨道定义)

  • 示例：repeat(3, 1fr) 创建三个等宽列

• fit-content()函数：根据内容大小调整轨道

  • 格式：fit-content(最大尺寸)

总结

CSS Grid 布局通过 display: grid 提供了一个完整的二维布局解决方案，允许开发者精确控制项目的行和列位置、大小和对齐方式。其强大的轨道定义系统、灵活的项目放置能力和丰富的对齐选项，使其成为构建复杂响应式布局的理想选择。