CSS Grid布局右侧底部边距过大 如何实现自适应缩放？

问题根源梳理 #

• 当前代码存在几个核心问题导致边距异常、无法自适应：
  1. 浏览器给body元素默认添加了8px左右的内外边距，未手动清除导致布局和视口边缘有空隙
  2. Grid行列设置不合理：固定200px行高、8ch固定列宽无法适配不同屏幕尺寸，也做不到占满视口
  3. 四个角的盒子手动设置了width:25%，反而限制了盒子在Grid单元格内的填充，导致右侧留白过大
  4. 缺少#two元素的Grid位置声明，也没有让Grid容器占满整个视口高度
  5. 额外的#link引用元素没有单独设置Grid位置，会占用自动布局的单元格空间，挤压四个角的盒子位置

修改后的完整blocks.css代码 #

/* 全局清除默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: grid;
  /* 两列均分宽度 */
  grid-template-columns: 1fr 1fr;
  /* 前两行占满除底部链接之外的所有视口高度，最后一行放链接 */
  grid-template-rows: 1fr 1fr auto;
  /* 间距按需调整，不需要可设为0 */
  gap: 10px;
  /* 让body占满整个视口高度 */
  min-height: 100vh;
}

#four {
  border-color: yellow;
  border-style: solid;
  border-width: 5px;
  text-align: center;
  /* 左下角 */
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#three {
  border-color: orange;
  border-width: 5px;
  border-style: solid;
  /* 左上角 */
  grid-column:  1/ 2;
  grid-row: 1 / 2;    
}

#one {
  border-color: blue;
  border-style: solid;
  border-width: 5px;
  /* 右下角 */
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

#two {
  border-color: green;
  border-style: solid;
  border-width: 5px;
  text-align: center;
  /* 右上角 */
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

#link {
  background-color: blue;
  color: white;
  text-align: center;
  /* 链接占满整行放在最底部 */
  grid-column: 1 / -1;
  padding: 8px 0;
}

#link a {
  color: white;
  text-decoration: none;
}

调整说明 #

• 新增全局box-sizing: border-box，让边框宽度算在盒子尺寸内，不会因为边框撑大盒子导致布局溢出
• 用1fr作为Grid行列单位，自动分配剩余空间，实现不同屏幕尺寸下的自适应缩放
• 显式给四个角的盒子指定对应的Grid行列位置，确保四个盒子刚好贴合视口四个角
• 底部链接单独占满整行放在最底部，不会干扰上方四角布局
• 移除所有盒子的固定宽度设置，让盒子自动填充对应的Grid单元格，消除右侧多余留白

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