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

Question

我的目标是在页面中心的 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>

标签： htmlcss

Answer 1

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

#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;
}