CSS Grid 自动布局算法:dense 如何改变项目放置顺序
本文深入解析 CSS Grid 自动布局算法中 dense 关键字的作用机制,对比稀疏与密集填充的差异,并通过商品卡片流式布局场景说明 dense 带来的视觉顺序变化、可访问性影响及适用边界,最后给出何时使用 dense 的决策建议。
共 2 篇文章
本文深入解析 CSS Grid 自动布局算法中 dense 关键字的作用机制,对比稀疏与密集填充的差异,并通过商品卡片流式布局场景说明 dense 带来的视觉顺序变化、可访问性影响及适用边界,最后给出何时使用 dense 的决策建议。
本文以商品卡片列表为例,说明传统嵌套网格为何需要魔法数字对齐,介绍 subgrid 如何让子网格继承父网格轨道定义,并讨论其适用边界、与 display: contents 的对比及降级方案。