使用Flexbox与Grid创作布局时<body>截断右侧网格线求助

算力阿峰

2026-7-17

网格右侧黑色网格线被截断问题解决

问题原因

你设置的.container固定宽度为600px，但网格实际占用的宽度已经超过了这个值：

列宽总和：220px + 160px + 130px + 90px = 600px
4列网格会生成3个横向间距（gap），每个9px，总间距宽度：3 × 9px = 27px
网格整体实际宽度：600px + 27px = 627px

容器被限制在600px宽度内，超出的27px部分被截断，导致右侧黑色网格线无法显示。body的align-items和justify-content仅控制容器在视口内的居中位置，无法解决容器自身内容溢出的问题。

解决方案（任选其一）

方案1：移除容器的固定宽度

让容器自动适配网格内容的实际宽度，完整显示黑色网格线：

.container {
  display: grid;
  height: 600px;
  /* 移除 width: 600px; 这一行 */
  gap: 9px;
  grid-template-columns: 220px 160px 130px 90px;
  grid-template-rows: 250px 130px 155px 65px;
  background-color: black;
}

方案2：调整列宽，让列宽总和加间距等于容器宽度

重新计算列宽，确保列宽总和 + (列数-1)×gap = 600px。比如把最后一列宽度改为63px：

grid-template-columns: 220px 160px 130px 63px;

计算验证：220+160+130+63=573，加上3×9=27，总和刚好是600px，匹配容器固定宽度。

方案3：给body添加横向滚动条

若需保留容器固定宽度，可让页面支持横向滚动查看完整内容：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: auto; /* 添加横向滚动 */
}