flex布局无法实现磁贴不规则高度拼接，因flex-wrap按行排列且取该行最大高度；css grid通过grid-column和grid-row跨距天然支持磁贴尺寸合并，更可靠。
Flex布局无法直接实现磁贴的不规则高度拼接
Flex 的 flex-wrap: wrap 本质是按行排列，每个 item 高度取该行最大值，无法让一个高 item（如 2×2 磁贴）下方紧贴两个 1×1 item——这属于 Masonry 布局范畴，原生 Flex 不支持跨行“填空”。强行用 flex-direction: column + align-items: flex-start 会破坏横向流式响应，且难以控制列高平衡。
用 CSS Grid 模拟磁贴尺寸更可靠
Windows 磁贴的核心是固定比例单元格 + 合并行列，Grid 天然支持 grid-column 和 grid-row 跨距。实际做法是定义统一网格轨道，再按磁贴类型设置跨度：
.tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.tile.small { grid-column: span 1; grid-row: span 1; }
.tile.medium { grid-column: span 2; grid-row: span 1; }
.tile.large { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 4; grid-row: span 1; }
注意：Grid 的 span 值必须为整数，不能写 span 1.5；若需响应式，在 @media 中重设 grid-template-columns 即可，无需改 HTML 结构。
Flex 仅适合纯等高磁贴（如全 1×1 或全 2×1）
如果所有磁贴高度一致（比如都设为固定 height: 100px），Flex 是轻量选择。但要注意：
-
flex-wrap: wrap下，justify-content控制行内对齐，align-content控制行间对齐——后者常被忽略，导致多行时垂直间隙异常 - 避免混用
flex-basis和width：磁贴宽度应统一用flex: 0 0 calc(25% - 6px)（4 列减去 gap），而非width: 25%，否则 gap 计算会出错 - IE11 对
flex-wrap支持有 bug，若需兼容，得用display: -ms-flexbox并手动换行（不推荐）
动态添加磁贴时 Grid 更易维护
Flex 在 JS 动态插入新 item 时，可能触发整行重排导致视觉跳动；Grid 则只影响局部网格线。关键点：
- 新增 item 直接 append 到容器，Grid 自动按顺序填入下一个空位，无需计算位置
- 若需拖拽排序，用
grid-area配合 JS 修改序号（如item.style.gridArea = '1 / 2 / 3 / 4'），比 Flex 的order属性更直观 - 动画友好：Grid 的
transition可作用于grid-column/grid-row，实现平滑移动；Flex 的order不支持过渡
真正麻烦的是磁贴内容自适应高度——Grid 容器默认按内容撑开行高，若想强制统一行高，得用 grid-auto-rows: 100px，但这会截断长文本，得配合 overflow: hidden 或 line-clamp。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
