Using css grid minmax and a href attributes

Question

I am new to using css grid. I am attempting to make a responsive grid of images that differ in sizes. The example that I came up with works perfectly but it seems like I need to define a size repeat(auto-fit, minmax(84px, max-content)); instead of something like repeat(auto-fit, minmax(min-content, max-content)); if I use auto-fit. This makes the a href attribute extend the 84px even if the image itself isn't 84px.

Is there a way to use auto-fit while also having the rows and columns fit perfectly like they do now, without having to define the size as 84px? Or is there a better way to do this while keeping it simple?

a {
  border: 2px dashed pink;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, max-content));
  align-items: center;
  grid-gap: 2rem;
}

.ef {
  background: url(https://fakeimg.pl/84x84/) no-repeat 0px 0px;
  width: 84px;
  height: 84px;
}

.eft {
  background: url(https://fakeimg.pl/16x16/) no-repeat 0px 0px;
  width: 16px;
  height: 16px;
}

.ytt {
  background: url(https://fakeimg.pl/44x44/) no-repeat 0px 0px;
  width: 44px;
  height: 44px;
}

<p>
  The grid is fine but the a href extends too far for some reason.
</p>

<section class="grid">
  <a href="/ytt">
    <div class="ytt"></div>
  </a>

  <a href="/ef">
    <div class="ef"></div>
  </a>

  <a href="/ef">
    <div class="ytt"></div>
  </a>

  <a href="/ef">
    <div class="ytt"></div>
  </a>

  <a href="/ef">
    <div class="ef"></div>
  </a>

  <a href="/ef">
    <div class="eft"></div>
  </a>

  <a href="/ef">
    <div class="eft"></div>
  </a>

  <a href="/ef">
    <div class="ef"></div>
  </a>

 <a href="/ef">
    <div class="eft"></div>
  </a>

  <a href="/ef">
    <div class="ytt"></div>
  </a>
  
  <a href="/ef">
    <div class="ytt"></div>
  </a>

  <a href="/ef">
    <div class="ytt"></div>
  </a>
</section>

Answer 1

Simply change justify-items. By default items will get stretched to fill the grid area since the default alignment is stretch. You already changed this on the cross axis using align-items. We do the same for the main axis using justify-items. You can notice that both properties accept stretch as value

a {
  border: 2px dashed pink;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, max-content));
  align-items: center;
  justify-items:center;
  grid-gap: 2rem;
}

.ef {
  background: url(https://fakeimg.pl/84x84/) no-repeat 0px 0px;
  width: 84px;
  height: 84px;
}

.eft {
  background: url(https://fakeimg.pl/16x16/) no-repeat 0px 0px;
  width: 16px;
  height: 16px;
}

.ytt {
  background: url(https://fakeimg.pl/44x44/) no-repeat 0px 0px;
  width: 44px;
  height: 44px;
}

<p>
  The grid is fine but the a href extends too far for some reason.
</p>

<section class="grid">
  <a href="/ytt">
    <div class="ytt"></div>
  </a>

  <a href="/ef">
    <div class="ef"></div>
  </a>

  <a href="/ef">
    <div class="ytt"></div>
  </a>

  <a href="/ef">
    <div class="ytt"></div>
  </a>

  <a href="/ef">
    <div class="ef"></div>
  </a>

  <a href="/ef">
    <div class="eft"></div>
  </a>

  <a href="/ef">
    <div class="eft"></div>
  </a>

  <a href="/ef">
    <div class="ef"></div>
  </a>

 <a href="/ef">
    <div class="eft"></div>
  </a>

  <a href="/ef">
    <div class="ytt"></div>
  </a>
  
  <a href="/ef">
    <div class="ytt"></div>
  </a>

  <a href="/ef">
    <div class="ytt"></div>
  </a>
</section>