How to make links not take up space in the grid?

Issue

How to make links not take up space in the grid and not be clickable on empty spaces?

I do not know how to explain correctly. Look at my code. I have circled in red. I need to get rid of this but it should be a grid.

    .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;
    }

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

Solution

Apply place-self/justify-self/align-self CSS properties to override the sizing of the <a> elements. For example, to have them in the top-left corner of each grid space, we could use 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;
}

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

Answered By - Wongjn