如何在HTML Grid单元格中添加H1元素，避免其溢出重叠？

你的问题核心在于两点：一是CSS类名拼写错误导致header样式未生效，二是固定高度的Grid行无法容纳H1的默认边距和字体大小。以下是修正后的完整示例：

关键修复点： #

• 修正类名拼写：.gird-header → .grid-header（笔误导致样式失效）
• 给header添加盒模型控制，避免内边距撑大容器
• 重置H1的默认margin，让它适配Grid行高度；同时添加文本换行处理，防止长文本溢出
• 可选：将Grid行的固定高度50px改为min-content，让行高自动适配内容

修正后的CSS代码： #

body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 可选：把固定高度50px改成min-content，让行高自适应 */
  grid-template-rows: min-content 1fr 1fr 100px;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.container div, .container header {
  padding: 10px;
  border: 1px solid #000000;
  box-sizing: border-box;
}

.grid-header {
  grid-column: 1 / 4; /* 简化写法，替代start/end */
}

h1 {
  text-align: center;
  margin: 0; /* 重置默认margin */
  line-height: 1.2; /* 控制行高，避免溢出 */
  overflow-wrap: break-word; /* 长文本自动换行 */
}

.content-game {
  grid-row: 2 / span 2;
  grid-column: 1 / 3;
}

.content-player {
  grid-column: 3 / 4;
  grid-row: 2 / span 1;
}

.content-buttons {
  grid-column: 3 / 4; /* 修正之前的错误：Grid只有3列，不能用4 */
  grid-row: 3 / span 1;
}

.content-footer {
  grid-column: 1 / 4;
  grid-row: 4 / span 1;
}

修正后的HTML代码： #

<div class="container">
  <header class="grid-header">
    <h1>Mensch Aerger dich nicht</h1>
  </header>
  <div class="content-game">Spiel</div>
  <div class="content-player">Spieler</div>
  <div class="content-buttons">Buttons</div>
  <div class="content-footer">Footer</div>
</div>

额外说明：你之前的CSS里.content.buttons是错误的类选择器（应该是.content-buttons），而且Grid只有3列，grid-column-start:4会导致元素超出布局范围，这些都一起修正了。

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