THE DESIGN LAB
设计，动手就懂。
改变一个变量，观察一个结果。把看过的原则，变成自己的直觉。
EXPERIMENT 05 / RESPONSIVE
屏幕变窄，应该缩小还是重排？
CHANGE THE SPACE
空间变了，结构也要变
示例容器宽度
280px760px
3当前列数
示例在 420px 与 640px 改变列数。断点由本例内容决定，不是所有产品的通用标准。
预览区域放不下时可在区域内横向滚动，示例保持真实 CSS 尺寸。
LIVE PREVIEW 实时示例
阅读清单640px / 3 列
01
视觉层级
决定先看到什么
设计笔记02
排版与留白
让信息容易阅读
设计笔记03
交互与反馈
让每个动作有回应
设计笔记观察一下
三列让相关内容同时可见。继续增加屏幕宽度时，也应考虑内容最大宽度。
IMPLEMENTATION NOTE
.cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@container (min-width: 420px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }
/* 父容器需要 container-type: inline-size */接下来，看看完整界面如何运用这些原则。
进入案例拆解