I ma not able to make this image grid in HTML CSS for my shopify store?

[atulsaini1989]

ABOVE IS THE REFERENCE IMAGE

I am trying to make this grid but not able to place images on the grid. Below is the code i have written for the grid but my images are not placed properly. Please help.

<style>
.angry-grid {
   display: grid; 

   grid-template-rows: 1331px 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr;
   
   gap: 5px;
   height: 100%;
   
}
  
#item-0 {

   background-color: #ddbbd9; 
   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 3;
   grid-column-end: 4;
   
}
#item-1 {

   background-color: #d98c9e; 
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 3;
   
}
#item-2 {

   background-color: #9589de; 
   grid-row-start: 3;
   grid-column-start: 1;

   grid-row-end: 4;
   grid-column-end: 4;
   
}
#item-3 {

   background-color: #ab77b5; 
   grid-row-start: 4;
   grid-column-start: 1;

   grid-row-end: 5;
   grid-column-end: 4;
   
}
#item-4 {

   background-color: #77e957; 
   grid-row-start: 2;
   grid-column-start: 1;

   grid-row-end: 3;
   grid-column-end: 2;
   
}
#item-5 {

   background-color: #59b599; 
   grid-row-start: 2;
   grid-column-start: 2;

   grid-row-end: 3;
   grid-column-end: 3;
   
}
</style>

<div class="angry-grid">
  <div id="item-0">&nbsp;  <img src="https://cdn.shopify.com/s/files/1/0570/8120/0663/files/ACTIVE_A_FRAME_1.jpg?v=1726121834">  </div>
  <div id="item-1">&nbsp;  <img src="https://cdn.shopify.com/s/files/1/0570/8120/0663/files/ACTIVE_A_FRAME_4.jpg?v=1726121834">  </div>
  <div id="item-2">&nbsp;  <img src="https://cdn.shopify.com/s/files/1/0570/8120/0663/files/ACTIVE_A_FRAME_4.jpg?v=1726121834">  </div>
  <div id="item-3">&nbsp;  <img src="https://cdn.shopify.com/s/files/1/0570/8120/0663/files/ACTIVE_A_FRAME_4.jpg?v=1726121834">  </div>
  <div id="item-4">&nbsp;  <img src="https://cdn.shopify.com/s/files/1/0570/8120/0663/files/ACTIVE_A_FRAME_4.jpg?v=1726121834">  </div>
  <div id="item-5">&nbsp;  <img src="https://cdn.shopify.com/s/files/1/0570/8120/0663/files/ACTIVE_A_FRAME_4.jpg?v=1726121834">  </div>
</div>

[Dan-From-Ryviu]

Hi @atulsaini1989 

You may need to create a HTLM layout like this to make it work.

[atulsaini1989]

Yes, Exactly

[wo]

The layout is fine according to this. But some details need to be adjusted

 <style>
        .angry-grid {
           display: grid; 
           grid-template-columns: repeat(3,1fr);
           grid-auto-rows: 200px;
           gap: 5px;
           height: 100%;
           
        }
        .angry-grid div{height: auto;}
        #item-0 {
        
           background-color: #ddbbd9; 
            grid-column: 1 / span 2;
            grid-row: 1 / span 1;
        }
        #item-1 {
        
           background-color: #d98c9e; 
           grid-column: 3 / span 1;
            grid-row: 1 / span 2;

           
        }
        #item-2 {
        
           background-color: #9589de; 
           grid-column: 1 / span 1;
            grid-row: 2 / span 2;
           
        }
        #item-3 {
        
           background-color: #ab77b5; 
           grid-column: 2 / span 1;
           grid-row: 2 / span 1;
           
        }
        #item-4 {
        
           background-color: #77e957; 
           grid-column: 1 / span 3;
           grid-row: 3 / span 1;
           
        }
        #item-5 {
        
           background-color: #59b599; 
           grid-column: 1 / span 3;
           grid-row: 4 / span 1;
    
           
        }
        .angry-grid img{width:100%;height:100%;object-fit: cover;}
        </style>
        <div class="angry-grid">
          <div id="item-0"><img src="https://cdn.shopify.com/s/files/1/0570/8120/0663/files/ACTIVE_A_FRAME_1.jpg?v=1726121834">  </div>
          <div id="item-1"><img src="https://cdn.shopify.com/s/files/1/0570/8120/0663/files/ACTIVE_A_FRAME_4.jpg?v=1726121834">  </div>
          <div id="item-2"><img src="https://community.shopify.com/c/image/serverpage/image-id/505821i60B841587468C5FF/image-size/large?v=v2&px=999">  </div>
          <div id="item-3"><img src="https://community.shopify.com/c/image/serverpage/image-id/505818i984549EBE89B288D/image-size/large?v=v2&px=999">  </div>
          <div id="item-4"><img src="https://community.shopify.com/c/image/serverpage/image-id/505823i4E2404C57A57EC26/image-size/large?v=v2&px=999">  </div>
          <div id="item-5"><img src="https://community.shopify.com/c/image/serverpage/image-id/505822iE8E8E5857978FD09/image-size/large?v=v2&px=999">  </div>
        </div>