如何使用网格均匀分布图像链接？

Question

我有一些链接到各自网站的图像，但是当我尝试将它们放入网格中时，它们只是堆叠在一起。我将它们包裹在一个div中，并将每张图片、描述和价格包裹在自己的div中，这样每个网格块都可以组织图片、它的名称和它的价格。

.apparel {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 1em;

}

.shirt-name {

  font-weight: 600;

}

.price {

  font-weight: 500;

}

.shirt-pic img {

  width: 100%;

  height: auto;

}

<div class="apparel">

  <div id="original" class="left-side">

    <a class="shirt-pic" href="pages/original.html"><img src="images/original.png" alt="Shirt 1" /></a>

    <span class="shirt-name helvetica size-s capitalized">Original</span>

    <span class="price helvetica size-s">&#36;20.00</span>

  </div>

  <div id="design1" class="right-side">

    <a class="shirt-pic" href="pages/design1.html"><img src="images/design1.png" alt="Shirt 2" /></a>

    <span class="shirt-name helvetica size-s capitalized">Design 1</span>

    <span class="price helvetica size-s">&#36;30.00</span>

  </div>

  <div id="design2" class="left-side">

    <a class="shirt-pic" href="pages/design2.html"><img src="images/design2.png" alt="Design 2" /></a>

    <span class="shirt-name helvetica size-s capitalized">Design 2</span>

    <span class="price helvetica size-s">&#36;30.00</span>

  </div>

  <div id="tri-tone" class="right-side">

    <a class="shirt-pic" href="pages/tri-tone.html"><img src="images/tri-tone.png" alt="Tri Tone" /></a>

    <span class="shirt-name helvetica size-s capitalized">Tri-Tone</span>

    <span class="price helvetica size-s">&#36;40.00</span>

  </div>

</div>

如果我使用 span 而不是 div，网格也可以工作吗？我如何确保价格和名称位于图片下方的中心？

Answer 1

仅用于flex中心：.apparel {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(2, 1fr);&nbsp; grid-gap: 1em;&nbsp; text-align: center;}.shirt-name {&nbsp; font-weight: 600;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.price {&nbsp; font-weight: 500;}.shirt-pic img {&nbsp; width: 50px;&nbsp; height: 50px;}<div class="apparel">&nbsp; <div id="original" class="left-side">&nbsp; &nbsp; <a class="shirt-pic" href="pages/original.html"><img src="http://placekitten.com/301/301" alt="Shirt 1" /></a>&nbsp; &nbsp; <span class="shirt-name helvetica size-s capitalized">Original</span>&nbsp; &nbsp; <span class="price helvetica size-s">&#36;20.00</span>&nbsp; </div>&nbsp; <div id="design1" class="right-side">&nbsp; &nbsp; <a class="shirt-pic" href="pages/design1.html"><img src="http://placekitten.com/301/301" alt="Shirt 2" /></a>&nbsp; &nbsp; <span class="shirt-name helvetica size-s capitalized">Design 1</span>&nbsp; &nbsp; <span class="price helvetica size-s">&#36;30.00</span>&nbsp; </div>&nbsp; <div id="design2" class="left-side">&nbsp; &nbsp; <a class="shirt-pic" href="pages/design2.html"><img src="http://placekitten.com/301/301" alt="Design 2" /></a>&nbsp; &nbsp; <span class="shirt-name helvetica size-s capitalized">Design 2</span>&nbsp; &nbsp; <span class="price helvetica size-s">&#36;30.00</span>&nbsp; </div>&nbsp; <div id="tri-tone" class="right-side">&nbsp; &nbsp; <a class="shirt-pic" href="pages/tri-tone.html"><img src="http://placekitten.com/301/301" alt="Tri Tone" /></a>&nbsp; &nbsp; <span class="shirt-name helvetica size-s capitalized">Tri-Tone</span>&nbsp; &nbsp; <span class="price helvetica size-s">&#36;40.00</span>&nbsp; </div></div>

Answer 2

这只是另一种制作垂直方向的方法：.shirt-name {   font-weight: 600;   display: block;     }由于span是内联元素，因此您需要进行设置display: block以确保下一个元素位于下一行。