Using css grid minmax and a href attributes - html

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>