CSS 布局玩具

Flex / Grid / 容器查询等布局原理：画布按真实布局算法排版，可调间距、列数与对齐，悬停读出尺寸。

技术栈: CSS Grid 原理, Flexbox 原理, gap, container query

• Grid 网格布局 — CSS Grid 玩具：浅色渐变单元格。
• Flex 弹性布局 — Flexbox 布局：子元素沿主轴排成一行，可调对齐方式、间距和换行。
• 瀑布流 Masonry — CSS columns 瀑布流。
• 多列排版 — 一段长文自动拆进 N 栏，阅读线更短。
• Sticky 粘性定位 — position:sticky 侧栏/章节。
• 绝对层叠 — 元素脱离普通流，用坐标和 z-index 决定谁在上。
• 容器查询感 — 容器宽度驱动布局。
• Bento 便当拼贴 — Bento 布局用同一套网格，让某些卡片跨多列多行，形成主次分明的拼贴，常见于产品首页与仪表盘。
• 圣杯布局 — 上面一条标题，下面页脚，中间三栏。
• 纵横比卡片 — 视频封面、卡片缩略图需要固定比例。
• 重叠层叠 — 头像组、堆叠通知、封面错位都靠重叠。
• 子网格 — subgrid 让嵌套网格「借用」父级的行列线，卡片内部字段也能和隔壁卡片对齐。