logo

该视频仅会员有权观看

立即开通课程「Web前端页面基础」权限。

¥
199
/ 年

CSS 网格自动排版的算法与尺寸(grid-auto-flow, grid-auto-rows, grid-auto-columns)

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