如何在CSS Grid中添加链接并实现整网格盒子可点击？

用CSS Grid实现表格布局，想给header4对应的网格区域添加链接，且让整个网格盒子可点击，但无论把链接放在div内部还是替换div为链接，都会打乱原有布局，求解决方法。

核心是让链接元素完全继承网格项的布局属性，同时占满整个网格区域，不破坏Grid布局结构：

修改后的代码 #

CSS 部分 #

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Hiragino Kaku Gothic Pro W3, Arial;
}

.title-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

.title {
  grid-area: title;
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 34px;
  color: #000000;
  grid-column: 1 / span 5;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  background-color: #000000;
  padding: 1px;
}

/* 让链接继承网格项的基础样式 */
.container div, .container a {
  background-color: #FFFFFF;
  padding: 10px;
  text-align: center;
  font-size: 28px;
  color: #000000;
}

.header {
  background-color: #86a789 !important;
  color: #FFFFFF !important;
  font-size: 28px;
}

.header2 {
  background-color: #739072 !important;
  color: #FFFFFF !important;
  font-size: 28px;
  grid-column: 2 / span 5;
}

.header3 {
  background-color: #739072 !important;
  color: #FFFFFF !important;
  font-size: 28px;
  grid-column: 1 / 2;
}

.header4 {
  background-color: #739072 !important;
  color: #FFFFFF !important;
  font-size: 28px;
  grid-column: 1;
  grid-row: 7 / span 2;
  align-content: center;
  display: grid; /* 保证内容居中对齐 */
  text-decoration: none; /* 去掉链接默认下划线 */
}

/* 可选：添加hover效果提升交互感 */
.header4:hover {
  opacity: 0.9;
}

.arrow {
  font-size: 28px;
  color: #739072;
}

.size {
  grid-column: 2 / span 2;
  text-decoration: none;
}

.size2 {
  grid-column: 4 / span 2;
}

.empty {
  background-color: #e5e5e5 !important;
  grid-column: 4 / span 2;
}

.empty2 {
  background-color: #e5e5e5 !important;
}

HTML 部分 #

<div class="title-container">
  <div class="title">
    <p style="color: #739072 !important; float: left; text-align: left; "><b>リード選びチャート</b><br>愛犬の性格、体重に合わせてリードを選びましょう！</p><img src="flexi-logo.png" width="12%" style="float: right;">
  </div>
</div>

<div class="container">
  <div class="header"><b>愛犬の性格</b></div>
  <div class="header2"><b>愛犬の体重</b></div>

  <div class="header3">おとなしい</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">普通</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">活発</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">とても活発</div>
  <div>9 - 15 kg</div>
  <div>16 - 20 kg</div>
  <div>21 - 25 kg</div>
  <div>26 - 30 kg</div>

  <div class="header3">リードの種類</div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>
  <div><img src="arrowonly.gif"></div>

  <!-- 将div替换为a标签，直接作为网格项 -->
  <a href="你的链接地址" class="header4">コードタイプ</a>
  <div class="size"><a href="">Sサイズ（5m）</a></div>
  <div class="empty"></div>
  <div class="size">Sサイズ（8m）</div>
  <div class="empty"></div>

  <div class="header3">とても活発</div>
  <div class="empty2"></div>
  <div>Sサイズ</div>
  <div class="size2">Mサイズ</div>
</div>

修改说明 #

1. CSS 调整：

   • 扩展.container的样式选择器，让链接元素继承网格项的基础样式，避免因默认行内元素特性导致布局错位。
   • 给.header4添加display: grid，保证链接内部内容和原div保持一致的居中对齐效果，同时去掉链接默认下划线。
   • 可选添加hover效果，增强交互反馈。

2. HTML 调整：

   • 直接将原<div class="header4">替换为<a>标签，让链接本身作为Grid的网格项，这样整个网格区域都能被点击，且完全保留原有布局结构。

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