如何使链接不占用网格空间？

Question

如何让链接不在网格中占用空间，并且在空白区域不可点击？

我不知道该如何准确解释。请看我的代码。我已经用红色圈出了问题部分。我需要去掉这些多余的区域，但仍保持网格布局。

siride · Answer

应用CSS属性place-self、justify-self和align-self来重写元素的尺寸设置。例如，如果我们希望每个网格空间内的链接位于左上角，可以使用place-self: start：

Duncan C · Answer

你可以将元素放入元素中，这样元素仅占用它们所需的必要空间。

以下是更新后的代码示例：

user2357112 · Answer

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

.theGrid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 设定两列，每列均分剩余空间 */
  gap: 16px 30px; /* 行与行之间间距为30px，列与列之间间距为16px */
  grid-auto-columns: 1fr; /* 自动添加的列宽为剩余空间的1份 */
  grid-auto-rows: 1fr; /* 自动添加的行高为剩余空间的1份 */
  position: relative; /* 设置网格容器为相对定位 */
}

a {
  border: 1px dashed red; /* 给链接添加1像素虚线红色边框 */
  position: absolute; /* 设置链接为绝对定位 */
  top: 0; /* 顶部距离容器顶部为0 */
  left: 0; /* 左侧距离容器左侧为0 */
}