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

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 {

  display: grid;

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

  grid-gap: 1em;

  text-align: center;

}

.shirt-name {

  font-weight: 600;

  display: flex;

  justify-content: center;

  align-items: center;

}

.price {

  font-weight: 500;

}

.shirt-pic img {

  width: 50px;

  height: 50px;

}

<div class="apparel">

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

    <a class="shirt-pic" href="pages/original.html"><img src="http://placekitten.com/301/301" 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="http://placekitten.com/301/301" 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="http://placekitten.com/301/301" 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="http://placekitten.com/301/301" 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>

Answer 2

这只是另一种制作垂直方向的方法：

.shirt-name {
  font-weight: 600;
  display: block;    
}

由于span是内联元素，因此您需要进行设置display: block以确保下一个元素位于下一行。