React styled-components开发中如何让卡片不与右侧相邻元素重叠并设置分隔样式

根因定位 #

重叠问题来自两处核心的样式配置不匹配：

• 卡片固定宽度超出栅格列轨道宽度：CardWrapper中写死了width: 375px，但外层栅格容器的列轨道设置的是grid-template-columns: repeat(auto-fill, 335px)，单个列轨道本身仅335px宽，卡片溢出的宽度会直接占取相邻列的空间，压在旁边的卡片上形成重叠。
• 内部卡片未同步匹配统一盒模型：外层栅格容器虽然加了box-sizing: border-box，但内部卡片没有配置相同的盒模型规则，卡片自身的内边距、边框会额外增加实际占位宽度，进一步放大溢出重叠的范围。

分步修复操作 #

1. 取消卡片的单独硬编码宽度
   删除CardWrapper中固定写死的width: 375px，让卡片宽度自动撑满所属的栅格列轨道宽度。如果确实需要卡片达到375px的视觉宽度，直接修改栅格列轨道的参数，把grid-template-columns: repeat(auto-fill, 335px)调整为repeat(auto-fill, 375px)，让轨道宽度和卡片预期宽度完全匹配，从根源避免宽度不匹配的问题。
2. 补全卡片的盒模型规则
   给CardWrapper添加box-sizing: border-box，让卡片自身的内边距、边框都纳入总宽度计算，不会因为样式叠加额外溢出占位。
3. 实现卡片间的黑色分隔效果
   不需要额外插入分隔用的DOM元素，直接给CardWrapper添加样式border-right: 1px solid #000，配合现有栅格设置的grid-gap: 20px 30px横向间距，就能自然形成两个相邻卡片间的黑色分隔线，既不会重叠，也能达到预期的视觉区分效果。
4. 清理冗余样式
   删掉CardWrapper中重复书写的flex-direction: column（当前代码里连续写了两次完全相同的属性）、无实际作用的padding-right: 0px，减少冗余代码。

内容的提问来源于stack exchange，提问作者jabinx92