HTML divs not properly displaying as a grid-CodePudding

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 >
    <div >
      <div  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 >Add to cart</button>
      </div>
      <p ></p>
      <div  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 >Add to cart</button>
      </div>  
      <p  data-aos="fade-right" data-aos-duration="800"></p>
      <div  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 >Add to cart</button>
      </div>
      <p  data-aos="fade-right" data-aos-duration="800"></p>
      <div  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 >Add to cart</button>
      </div>
      <p  data-aos="fade-right" data-aos-duration="800"></p>
      <div  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 >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>

CodePudding user response：

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.

CodePudding user response：

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