使用CSS网格minmax和href属性

Question

我对使用CSS网格是陌生的。我正在尝试制作大小不同的图像响应网格。我想出的示例效果很好，但是如果我使用repeat(auto-fit, minmax(84px, max-content));，似乎需要定义大小repeat(auto-fit, minmax(min-content, max-content));而不是auto-fit之类的东西。这使a href属性扩展了84px，即使图像本身不是84px。

有没有一种方法可以使用auto-fit，同时使行和列像现在一样完全适合，而不必将大小定义为84px？还是有一种更好的方法来做到这一点同时保持简单？

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

只需更改justify-items。默认情况下，由于默认对齐方式为拉伸，因此项目将被拉伸以填充网格区域。您已经使用align-items在横轴上对此进行了更改。我们使用justify-items对主轴进行相同的操作。您可能会注意到，两个属性都将拉伸作为值

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>