跳转到内容

前端与界面 · DEFINED TERM

CSS Grid 网格布局

用明确的行列轨道组织二维页面结构。

你可能会这样说“桌面三列、平板两列、手机单列,卡片宽度保持稳定。”

VISUAL EXAMPLE

先看懂它怎么工作

CSS Grid 网格布局
层 1定义网格轨道
层 2放置项目
层 3调整跨行跨列
层 4响应断点

MECHANISM

运行机制

  1. 定义网格轨道
  2. 放置项目
  3. 调整跨行跨列
  4. 响应断点

USE WHEN

适合这样用

卡片矩阵、仪表盘和复杂页面骨架

NOT FOR

不要这样理解

简单单轴排列不必使用复杂网格

TELL YOUR AGENT

可直接发给 Agent

请按“CSS Grid 网格布局”的概念处理这个需求:桌面三列、平板两列、手机单列,卡片宽度保持稳定。。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

轨道在各断点可预测,内容不会撑破列宽或产生横向滚动

OFFICIAL SOURCES

官方来源