应用place-self/justify-self/align-self CSS属性来覆盖<a>元素的大小。例如，要让它们位于每个网格空间的左上角，我们可以使用place-self: start：

.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;
  place-self: start;
}

个字符

您可以将<a/>元素放在<span/>元素中，然后<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;
}

个字符

.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;
  position: relative; /* Set position to relative */
}

a {
  border: 1px dashed red;
  position: absolute; /* Set position to absolute */
  top: 0;
  left: 0;
}

字符串