如何在2x2网格中显示这些图像？

debugcn 发表于 Dev

大卫__

我的目标是在页面中心的2x2网格中显示4张图像，所有图像下方均显示文字。这些图像将用作其他页面的链接。但是，我很难让这些图像显示我想要的图像！任何帮助将不胜感激。请参阅相关代码。谢谢！

#main img{
    max-width: 500px; 
    height: auto;
    margin-top: 10px;
    display: block;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-gap: 10px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    border: 3px lightblue solid;
    position: relative;
}

    <div id="main">
        <div class="category-1">
          <img src="./images/apples.jpg" alt="Sandwich"/>
          <h3>Candy Apples!</h3>
          <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
        </div>
        <div class="category-2">
          <img src="./images/santacookie.jpg" alt="Steak">
          <h3>Christmas Cookies!</h3>
          <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
        </div>
        <div class="category-3">
          <img src="./images/eastertreats.jpg" alt="Cherries">
          <h3>Easter Treats!</h3>
          <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
        </div>
        <div class="category-4">
          <img src="/w3images/wine.jpg" alt="Pasta and Wine">
          <h3>Category 4</h3>
          <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
        </div>
    </div>

约卡南·辛伯格

您错误地放置并使用了网格属性。尝试这个：

#main {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px;
}

#main img{
    max-width: 500px; 
    height: auto;
    margin-top: 10px;
    display: block;
    margin: auto;
    border: 3px lightblue solid;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。