CSS Grid布局卡片排列异常 第4个及后续article元素不显示求助

问题排查与修复方案 #

• 核心问题大概率是溢出内容被裁切，可按以下步骤排查修复：

1. 检查全局样式中是否给HTML、原生<body>标签设置了height: 100vh/固定高度 + overflow: hidden，超出视口高度的第4、5个卡片和页脚会被直接隐藏，删除overflow: hidden或者改为overflow: auto即可。
2. 给你的网格容器显式设置自动行高，避免未知默认样式导致后续行高为0：

.body {
  width: 80%;
  margin: auto;
  border: 2px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  grid-auto-rows: auto; /* 新增，自动根据内容撑开行高 */
  gap: 20px; /* 可选，控制卡片行列间距 */
}

3. 优化卡片宽度规则，避免padding、border撑爆容器导致布局异常：

article {
  width: 100%;
  max-width: 22vw;
  border: 2px solid black;
  padding: 5px;
  box-sizing: border-box; /* 新增，内边距、边框不会额外增加元素宽度 */
}

4. 排查是否有其他全局样式给article:nth-child(n+4)设置了display: none/visibility: hidden，删除这类规则即可正常显示后续卡片。

• 可选优化：建议将类名.body修改为cards-container这类语义化名称，避免和原生<body>标签的样式产生冲突。

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