如何使用网格均匀地展开图像链接

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以确保下一个元素位于下一行。