logo

该视频仅会员有权观看

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

¥
199
/ 年

CSS 网格布局(Grid)

  • 网格由水平线和垂直线相交组成。
  • 已提供网格模块 (great模块) 来自定义和放置页面元素。
  • 在app元素中含有三个子元素,设为网格容器 (great container) 后,子元素成为网格项目 (great items)。
  • 使用Firefox浏览器开发者工具可以查看和设置网格布局。
  • 通过great template 和 great template columns 定义行列,设定列宽度为32px、72px、128px。
  • 列宽也可以以fr (fraction of the available space) 单位设置,例如e f r 表示占用剩余空间的一份。
  • 可以用 repeat 函数来重复生成列值。
  • 间隔可以通过 column gap 或 row gap 设置,统一间隔使用 gap 属性。
  • 自动添加行来适配额外的网格项目,背景颜色可用于区分不同元素。