用 CSS Grid 可精准还原蒙德里安式非对称平衡网格，需手动定义行列尺寸（如 200px 1fr 300px），禁用 repeat() 均分；色块为独立 div 平涂纯色，黑线亦为独立色块；慎用 vw，推荐 clamp() 维持比例；务必清除所有冗余间距与样式。
用 CSS Grid 切出蒙德里安式色块网格
蒙德里安画作的核心不是颜色，而是「非对称但平衡的矩形分区」——靠纯 CSS Grid 就能还原，关键是放弃等分思维，手动定义 grid-template-rows 和 grid-template-columns 的具体像素或分数值。
- 别用
repeat(3, 1fr)这类均分写法，蒙德里安的分割线位置是刻意偏移的（比如顶部横条常占 15%，左侧竖条常占 25%） - 推荐用
fr混合固定值：例如grid-template-columns: 200px 1fr 300px比纯百分比更易控制视觉权重 - 每一块色块用独立
div，设background-color，不依赖伪元素或渐变——他不用过渡，只用平涂
避免 Flexbox 导致的布局塌陷
有人试过用 display: flex 堆色块，结果发现横向色块高度不一致、对齐错乱——Flex 默认按内容撑高，而蒙德里安所有色块必须严格贴合网格线，高度由容器统一约束。
- Flex 容器加
align-items: stretch也不可靠，一旦某色块内容为空或字体加载延迟，高度仍会抖动 - Grid 容器天然支持行列对齐，
grid-auto-rows: 100px可强制所有行高一致，且不影响列宽定义 - 如果真要用 Flex，必须给每个子项加
flex: 1 1 auto+ 显式min-height，但不如 Grid 直接
响应式下保持「非均分比例」不崩坏
在小屏上把 200px 1fr 300px 直接缩放会失衡，蒙德里安的结构感来自比例关系，不是绝对尺寸。
- 把像素值换成
minmax(20vw, 200px)或clamp(120px, 25vw, 300px)，让关键分割线在不同屏幕保有相对权重 - 慎用
vw单独设色块宽高——视口变化时，色块可能被拉成细长条，破坏矩形稳重感 - 移动端可简化结构：保留 3×2 主框架，合并部分小色块，而非强行塞进原比例
颜色值和边框的物理级还原
蒙德里安只用红、蓝、黄、黑、白五种色，且颜料有厚度感——CSS 里容易忽略的是「黑线不是边框，是独立色块」。
立即学习“前端免费学习笔记（深入）”；
- 别给色块加
border: 4px solid black，那会导致内容区域缩进，破坏精确拼接；正确做法是额外加一层div设为黑色，宽高对应线条尺寸 - 红/蓝/黄建议用 sRGB 标准值：
#FF0000、#0000FF、#FFFF00，避免用hsl()或明度调整，他拒绝灰调 - 白色背景必须是
#FFFFFF，不能是rgb(255,255,255)或透明，印刷级还原要求零偏差
最难的不是画出格子，是判断哪几条线该留空、哪几块该收缩——蒙德里安删掉的永远比画出的多。CSS 里删掉 padding、删掉 margin、删掉所有没明确用途的 class，剩下的才是结构本身。
