我有一些链接到各自网站的图像，但是当我尝试将它们放入网格中时，它们只是堆叠在一起。我将它们包裹在一个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">$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">$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">$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">$40.00</span>
</div>
</div>
如果我使用 span 而不是 div，网格也可以工作吗？我如何确保价格和名称位于图片下方的中心？
尚方宝剑之说
BIG阳
相关分类