HTML divs not properly displaying as a grid - html

Question

I need to put these divs into a grid so that they display on the screen in a grid as opposed to a block. I have them displayed in a block and centered on the screen for smaller screen widths and after a certain screen width I would like them to display as a grid, but I keep getting the buttons and text displaying to the right of the images as opposed to displaying under the images. Here is my HTML and CSS code...
<section>
<div class="container-2">
<div class="wrapper-2">
<div class="boxes" data-aos="fade-up" data-aos-duration="800">
<img src="https://atlas-content-cdn.pixelsquid.com/stock-images/shirt-men-181dmv4-600.jpg" alt="Image cannot be displayed">
<h2>Men's slim fit blue plaid shirt</h2>
<p>$50.00</p>
<button class="arrivals-buttons">Add to cart</button>
</div>
<p class="border-bottom"></p>
<div class="boxes" data-aos="fade-up" data-aos-duration="800">
<img src="https://watchdreamer.com/sites/default/files/styles/soldat_md/public/2021-05/WBP201A.BA0632_.png?h=7afb1587&itok=EH_sMV2B" alt="Image cannot be displayed">
<h2>Men's silver and black time piece</h2>
<p>$499.99</p>
<button class="arrivals-buttons">Add to cart</button>
</div>
<p class="border-bottom" data-aos="fade-right" data-aos-duration="800"></p>
<div class="boxes" data-aos="fade-up" data-aos-duration="800">
<img src="https://www.pngall.com/wp-content/uploads/5/Brown-Men-Shoes-PNG-Image.png" alt="Image cannot be displayed">
<h2>Men's Uncle Tom dress shoes</h2>
<p>$44.99</p>
<button class="arrivals-buttons">Add to cart</button>
</div>
<p class="border-bottom" data-aos="fade-right" data-aos-duration="800"></p>
<div class="boxes" data-aos="fade-up" data-aos-duration="800">
<img src="https://i5.walmartimages.com/asr/b19cdda5-932f-4862-a7b3-b7440bfb759e_1.87f4ae5495ec75a86d5f6e4572e807d3.jpeg?odnHeight=612&odnWidth=612&odnBg=FFFFFF" alt="Image cannot be displayed">
<h2>Men's slim black slim fit dress pants</h2>
<p>$70.00</p>
<button class="arrivals-buttons">Add to cart</button>
</div>
<p class="border-bottom" data-aos="fade-right" data-aos-duration="800"></p>
<div class="boxes" data-aos="fade-up" data-aos-duration="800">
<img src="https://www.suitsexpert.com/wp-content/uploads/2019/01/silk-tie.png" alt="Image cannot be displayed">
<h2>Men's formal red tie</h2>
<p>$19.99</p>
<button class="arrivals-buttons">Add to cart</button>
</div>
</div>
</div>
</section>
<style>
.container-2 {
width: 90%;
display: block;
margin: 0 auto 0 auto;
}
.boxes {
display: grid;
justify-content: space-evenly;
grid-template-columns: 220px 220px 220px;
}
</style>

Answer 1

You need to change .boxes class. When grid-template-columns property is used, it will create columns that put your text and button to the side of your image.
.boxes {
display: grid;
width: 50%;
margin: 0 auto;
}
Also, you can add width and height to your image so that it does not go out of the grid width.

Answer 2

You don't put display:grid; at the boxes you want to be a part of the grid. But you put it in the container. This would be an example
.container-2 {
display:grid;
gap:1rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: 200px;
}
then you can remove the .wrapper-2 element