- 网格自动排版规则允许在未明确设计项尺寸和位置时自动排列网格项目。
- 例子中的网格容器将六个项目分成三列进行排列,每行展示三个项目。
- 使用
grid-auto-flow
可以控制自动排版的算法,调整为column
时项目会沿列自动排放。 grid-auto-rows
属性可以设置自动创建行的尺寸,默认为auto
,但也可以指定具体的尺寸值。- 更改
grid-template-columns
至grid-template-rows
可以定义行数,并使用grid-auto-flow
控制项目在列中的排布。 - 利用
grid-auto-columns
可以控制自动生成列的尺寸,例如指定第一列为100像素,剩余空间分配给第二列。