网格模板 (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' } |
示例
Loading Preview…