CSS Grid容器设width:100%仍无法占满屏幕宽度问题求解

问题根源 #

你的代码里有3个核心问题导致容器无法占满屏幕宽度：

• 浏览器默认给<html>、<body>标签添加了8px的外边距，且你没有给这两个根级标签设置100%宽度，Grid容器的宽度受限于父级body的默认内容宽度
• 你定义的网格列宽是固定值repeat(6, 5vw)，6列加起来总宽度只有30vw，就算算上5个列间距（5*60px=300px），总网格宽度远小于屏幕宽度，固定尺寸的轨道不会自动拉伸撑满容器
• Grid布局的子元素上添加的float: right属于完全无效的冗余代码，Grid会忽略子项的浮动属性，虽然不影响宽度但属于无用写法

可直接运行的修复代码 #

HTML结构不需要调整，替换CSS为以下内容即可：

/* 重置浏览器默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
}
.parent {
  display: grid;
  /* 用弹性单位fr替代固定vw，6列自动等分容器宽度 */
  grid-template-columns: repeat(6, 1fr);
  /* 行高用minmax做最小高度限制，避免内容溢出 */
  grid-template-rows: repeat(6, minmax(100px, 1fr));
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  width: 100%;
  /* 如需容器同时占满屏幕高度，放开下面这行注释即可 */
  /* min-height: 100vh; */
}

.div1 { 
  grid-area: 1 / 1 / 4 / 4; 
  background-color: green;
}

.div2 { 
  grid-area: 4 / 1 / 7 / 4; 
  background-color: black;
}

.div3 { 
  grid-area: 1 / 4 / 3 / 7; 
  background-color: black;
}

.div4 { 
  grid-area: 3 / 4 / 5 / 7; 
  background-color: black;
}

.div5 { 
  grid-area: 5 / 4 / 7 / 7; 
  background-color: black;
}

关键调整说明 #

• box-sizing: border-box会把元素的内边距、边框算入设定的宽高内，不会出现加了padding就撑破容器的问题
• 1fr是Grid布局专属的弹性单位，会自动计算容器扣除间距后的剩余宽度，按比例分配给对应轨道，是做自适应Grid布局最常用的单位
• 所有子项上的float属性已经全部删除，Grid布局中子项的位置完全由网格规则控制，浮动、清除浮动这类属性在Grid子项上不生效

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