直接用 gap 无法显示卡片阴影，因为 gap 是透明间隙不占渲染空间，阴影会被裁剪或遮挡；需关闭 gap 改用卡片 margin 实现间距，并配合容器 padding 或 calc() 抵消溢出，再通过 position: relative 和 z-index: 1 解决层叠问题。
为什么直接用 gap 无法显示卡片阴影？
因为 gap 是网格容器的“透明间隙”，它不占据渲染空间，阴影会直接被裁剪或叠在相邻卡片上——尤其当卡片设置了 overflow: hidden 或父容器有 clip-path 时，阴影根本出不来。
用 margin 替代 gap 实现可渲染的间距
让每张卡片自己控制外边距，阴影就能完整绘制。关键点在于：必须关闭网格的 gap，改由子项承担间距逻辑。
- 网格容器设为
gap: 0 - 卡片元素设置
margin（例如margin: 16px），注意需配合display: contents或重置网格项的默认行为 - 若使用
grid-auto-flow: dense，要避免margin导致布局错位，建议统一用grid-template-columns
示例：
section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0; /* 关键：关掉原生 gap */
}
.card {
margin: 16px; /* 阴影和间距都靠它 */
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
避免 margin 引发的首行/末行额外空白
单纯加 margin 会让最外侧卡片撑出容器边界，视觉上左右/上下留白过大。这不是 bug，是盒模型的自然表现。
- 用
padding在网格容器上“吃掉”这部分溢出：padding: 16px - 或改用
calc()动态调整列宽，抵消 margin 占位：minmax(calc(280px + 32px), 1fr)配合margin: 16px - 更稳妥的做法：用伪元素或
:first-child/:last-child选择器单独清除边缘 margin（但响应式下难维护）
阴影层级被其他卡片遮挡怎么办？
默认情况下，后渲染的网格项会覆盖前面项的阴影——尤其在 grid-auto-flow: row 下，右侧卡片容易盖住左侧卡片阴影。
- 给卡片加
z-index: 1（需同时设position: relative） - 避免用
grid-area手动重排顺序，否则 z-index 顺序易失控 - 如果用了
transform: translateY()类动画，注意它会创建新层叠上下文，可能绕过 z-index 控制
简单起见，优先用 position: relative; z-index: 1，别依赖文档流默认堆叠。
阴影不是装饰细节，它本质是视觉层深的信号。卡片间距一旦和阴影耦合，就不再是纯布局问题——得同时考虑盒模型、层叠上下文、响应式断点对 margin 的影响。这些地方改一处，往往三处跟着动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
