如何让Grid布局中的链接不占多余空间且空白区域不可点击？

问题出在Grid布局的默认行为上——网格子元素会自动拉伸填充整个单元格，所以你的<a>标签占满了整个网格区域，导致空白部分也能触发点击。要保留Grid布局同时解决这个问题，有两种简单的处理方式：

方法一：修改链接的对齐方式 #

给<a>标签添加对齐属性，让它只占据自身内容的空间，不拉伸填充整个网格单元格：

.theContainer {
  border: 1px solid blue;
  padding: 20px;
  width: 300px;
  height: 300px
}

.theGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 30px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}

a {
  border: 1px dashed red;
  /* 关键：让链接只靠左上角对齐，不拉伸 */
  justify-self: start;
  align-self: start;
}

这样<a>标签就只会包裹文字内容，空白区域不会触发点击，同时Grid的布局结构保持不变。

方法二：给链接套一层容器 #

如果需要网格单元格保持完整的占位，但只让文字区域可点击，可以给每个<a>标签外面加一个<div>作为网格子元素，<a>标签保持行内元素特性：

修改后的HTML：

<div class="theContainer">
  <div class="theGrid">
    <div><a href="/a">Link1</a></div>
    <div><a href="/a">Link2</a></div>
    <div><a href="/a">Link3</a></div>
    <div><a href="/a">Link4</a></div>
  </div>
</div>

对应的CSS可以保持原Grid样式，<a>标签默认就是行内元素，只会占据内容空间：

.theContainer {
  border: 1px solid blue;
  padding: 20px;
  width: 300px;
  height: 300px
}

.theGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 30px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}

a {
  border: 1px dashed red;
}

两种方法都能解决你的问题，选哪种看你后续的布局需求——如果需要网格单元格的占位有其他样式（比如背景），方法二更合适；如果只是要链接不占多余空间，方法一更简洁。

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