How can I display these images in a 2x2 grid? - html

Question

My goal here is to display 4 images in a 2x2 grid at the center of the page that will have text underneath all of the images. These images will then serve as a link to other pages. However, I am having trouble getting these images to display how I would like them to! Any help would be greatly appreciated. Please see relevant code. Thank you!
#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>

Answer 1

You have placed and used the grid properties wrongly.
Try this:
#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;
}