CSS Grid布局本地正常 WordPress中内容未撑满网格容器问题求助

问题根因 #

• 网格容器存在布局规则冲突：你给同一个容器（id="grid"同时绑定了grid-section类）同时设置了display: flex（class规则）和display: grid（ID规则），虽然ID选择器优先级更高，但WordPress主题自带的默认样式可能篡改优先级，导致容器最终按flex布局渲染，子元素无法适配网格区域。
• Grid子项缺少强制拉伸配置：部分WordPress主题会给Grid容器默认设置justify-items: start、align-items: start，导致子项仅按内容大小渲染，不会自动撑满对应网格单元格。
• 未统一盒模型规则：WordPress主题默认盒模型可能为content-box，你给第一个box设置的内边距会撑大元素尺寸，间接挤压其他网格项的可用空间。

修复方案 #

按以下要求修改CSS代码即可：

1. 删除grid-section类中无关的flex布局规则，避免冲突
2. 给Grid容器显式设置子项拉伸规则，覆盖主题默认样式
3. 统一全局盒模型，避免内边距/边框撑开元素
4. 给.box类显式设置宽高100%，确保撑满单元格

修改后的完整CSS代码如下：

/* 全局统一盒模型与默认边距，覆盖主题默认配置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main{
  width: 100vw;
  display: flex;
  justify-content: space-around;
}

.grid-section{
  width: 100%;
  max-width: 960px;
  height: 100vh;
  max-height: 250px;
  background: #313131;
  color: rgb(211, 168, 168);
  font-size: 15px;
  overflow:hidden;
  border-radius: 10px;
}

#grid{
  display: grid;
  grid-template-columns: repeat(32, 1fr);
  grid-template-rows: 12% 44% 44%;
  /* 显式强制子项拉伸撑满单元格 */
  justify-items: stretch;
  align-items: stretch;
} 

.box {
  display: flex;
  width: 100%;
  height: 100%;
}


/*top*/
.box:nth-child(1){
    background: #9dcbe9;
    grid-column: 1/33;
    grid-row: 1/2;
    padding: 5px;
}
/*left*/
.box:nth-child(2){
    background: #eed875;
    grid-column: 1/6;
    grid-row: 2/4;
}
/*right*/
.box:nth-child(3){
    background: #c97eec;
    grid-column:28/33;
    grid-row: 2/4;
}
/*middle long*/
.box:nth-child(4){
    background: #9de99d;
    grid-column: 6/28;
    grid-row: 2/3;
}


/*mini boxes*/
.box:nth-child(5){
    background: #ffa569;
    grid-column: 6/9;
    grid-row: 3/4;
}
.box:nth-child(6){
    background: #584905;
    grid-column: 9/14;
    grid-row: 3/4;
}
.box:nth-child(7){
    background: #560b79;
    grid-column: 14/17;
    grid-row: 3/4;
}
.box:nth-child(8){
    background: #00ff00;
    grid-column: 17/20;
    grid-row: 3/4;
}
.box:nth-child(9){
    background: #0a9ed8;
    grid-column: 20/23;
    grid-row: 3/4;
}
.box:nth-child(10){
    background: #5802e2;
    grid-column: 23/28;
    grid-row: 3/4;
}

如果修改后仍有样式被覆盖的情况，可给对应规则添加!important提升优先级，比如display: grid !important;。

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