CSS Grid头部在Chrome/Opera显示异常，Firefox正常求助

嘿，这个问题我之前折腾过好一会儿！你的问题根源其实出在.site-header里的display: table属性上——Firefox和Chrome/Opera对Grid容器内表格元素的宽度计算逻辑不一样，导致头部没有正确跨占三列的宽度。

问题分析 #

你给容器定义了grid-template-columns: auto 1fr auto，并且把site-header设为grid-area: site-header（对应跨三列），但因为.site-header用了display: table，Chrome和Opera会把它当作表格元素来计算宽度，优先遵循表格的收缩规则，而不是Grid的跨列宽度分配，所以就出现了只占1/3宽度的情况。

解决方案 #

去掉display: table，如果你的目的是让头部内容垂直居中，用Grid或者Flex来实现会更兼容：

修改后的代码

div.container { 
  display: grid; 
  grid-template-columns: auto 1fr auto; 
  grid-template-rows: auto 1fr; 
  grid-template-areas: 
    "site-header site-header site-header" 
    "site-nav content sidebar"; 
  grid-gap: 0; 
  max-width: 100%; 
  min-height: 100vh; /* 用vh更稳妥，确保占满视口高度 */
}

.site-header { 
  grid-area: site-header; 
  height: 250px; 
  border-bottom: 2px solid #999; 
  background-color: green;
  /* 用Flex实现内容水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

额外说明 #

• 把min-height: 100%改成min-height: 100vh，可以确保容器占满整个视口高度，避免父元素高度不确定时的布局问题。
• 如果一定要保留display: table，可以给.site-header强制加上width: 100%，不过这种方式不如用Flex/Grid居中来得优雅，也可能带来其他潜在问题。

这样修改后，头部应该能在所有现代浏览器里正常占满宽度了！

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