Grid布局下Logo文本显示异常，需实现Logo全屏宽度适配

问题：Logo文本在Grid布局中显示不正确，周围留有白色背景，希望让Logo占据所在单元格的完整宽度。尝试修改grid-template-area属性未解决问题。

问题根源分析 #

1. h1默认外边距：浏览器自带样式给<h1>设置了margin，导致红色背景和文本之间出现空白，视觉上呈现白色边框。
2. 网格元素未绑定区域：定义了grid-template-areas，但<nav>等元素没有设置对应的grid-area，布局自动分配位置可能干扰Logo的显示空间。
3. Logo未占满单元格：默认情况下块级元素高度由内容决定，不会自动填充网格单元格的高度。

修正代码 #

CSS

body {
  text-transform: capitalize;
  margin: 0;
}

.page {
  background-image: url(./hero-bg.jpg);
  display: grid;
  height: 100vh;
  grid-template-columns: 10% auto;
  grid-template-rows: 15% auto auto auto;
  grid-template-areas: 
    "logo header header header" 
    "sidebar section section section" 
    "sidebar main main main " 
    "sidebar footer footer footer";
}

.logo {
  grid-area: logo;
  background-color: rgba(255, 0, 0, 0.55);
  margin: 0; /* 移除h1默认外边距 */
  width: 100%; /* 占满单元格宽度 */
  height: 100%; /* 占满单元格高度 */
  display: flex;
  align-items: center; /* 可选：垂直居中文本 */
  justify-content: center; /* 可选：水平居中文本 */
}

/* 绑定所有元素到对应网格区域 */
nav { grid-area: header; }
aside { grid-area: sidebar; }
section { grid-area: section; }
main { grid-area: main; }
footer { grid-area: footer; }

HTML

<div class="page">
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">policy</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
  <h1 class="logo">Batoot</h1>
  <aside>sidebar</aside>
  <section>section</section>
  <main>main content</main>
  <footer>footer</footer>
</div>

核心修改说明 #

• 给.logo添加margin: 0，彻底消除默认边距带来的空白。
• 设置width: 100%和height: 100%，强制Logo填充整个网格单元格。
• 为所有布局元素指定grid-area，确保网格布局严格按照定义规则执行，避免元素错位。

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