使用css grid minmax和a href属性

Question

我对使用css网格是个新手。我正在尝试制作不同大小的图像的响应式网格。我想出的例子工作得很好，但是如果我使用auto-fit，似乎需要定义一个大小的repeat(auto-fit, minmax(84px, max-content));，而不是像repeat(auto-fit, minmax(min-content, max-content));这样的东西。这使得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即可。默认情况下，项目将被拉伸以填充网格区域，因为默认对齐方式为stretch。您已经使用align-items在十字轴上更改了此设置。我们使用justify-items对主轴执行相同的操作。您可以注意到，这两个属性都接受stretch作为值

​

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>

​