网格模板 (Grid Templates)
定义网格的行和列。
gridTemplateColumns 和 gridTemplateRows 属性定义网格的轨道尺寸函数。
轨道尺寸
每个轨道使用 min 和 max 尺寸函数定义：
| 值 | 描述 | 示例 (JS) |
|---|---|---|
| Points（点） | 像素单位的固定尺寸。 | { min: 100, max: 100 } |
| Percent（百分比） | 容器尺寸的百分比。 | { min: 0, max: '50%' } |
| Flex (fr)（弹性） | 剩余空间的份额（分数单位）。 | { min: 0, max: '1fr' } |
| Auto（自动） | 基于内容和可用空间的尺寸。 | { min: 'auto', max: 'auto' } |
| MinContent（最小内容） | 适合内容的最小可能尺寸。 | { min: 'min-content', max: 'auto' } |
| MaxContent（最大内容） | 适合内容的最大可能尺寸。 | { min: 'auto', max: 'max-content' } |
min 和 max 的百分比均使用 "50%" 这样的字符串；它表示网格内容区域对应轴尺寸的一半，计算时会扣除 padding、border 和预留的滚动条。数字表示固定长度，例如 0.5 是 0.5 像素。此约定也适用于 gridAutoRows、gridAutoColumns 和 repeat 的 tracks 数组。若参照尺寸尚未确定，百分比会按布局阶段处理；固定百分比轨道加上 gap 也可能超出容器。
示例
Loading Preview…