مشكلة في تناسق تصميم الصفحة

حولت لساعات و انا سيء جدا في css بس اتعلمه ولا وجدت حل 

 <div class="items-shop" >
          {{-- <div>
            <img src="{{asset("b4f8c7125fec5a56f171c2a8ccc25b72.jpg")}}" >
        </div> --}}


      
        {{-- <div > --}}
            {{-- <img src="{{asset("pc.jpg")}}" >
        </div>

         <div>
            <img src="{{asset("lap.jpg")}}" >
        </div>

        <div>
            <img src="{{asset("motherboard.png")}}" >
        </div>
 

      
        <div >
            <img src="{{asset("pcNV.jpg")}}" >
        </div>

         <div>
            <img src="{{asset("8pc.png")}}" >
        </div>
         --}}

         @foreach ($products as $product)
          <div>
             @foreach ($product_images as $images)
                 @if($images->product_id==$product->id)
                    <a href="/">
                        
                        <img src="{{asset("img")}}" >
                        
                    </a>
                   
                     @break
                @endif
             @endforeach
              <ul>
                    <li class="prname">{{name}}</li>
                    <hr>    
                    <li class="pprice">
                        <a href="/" style="grid-area: price">
                            price
                        </a>
                    </li>
                    <br>
                    <hr>
                    <br>
                    <li class="paction">
                        {{-- <ul class="bottom-item">
                            <li><i class="fa fa-search" aria-hidden="true"></i></li>
                            <li><button>اضافة للسلة</button></li>
                            <li><i class="fa fa-heart-o" aria-hidden="true"></i></li>
                        </ul> --}}
                        <div class="last">
                            <ul class="bottom-item">
                                <li><i class="fa fa-search" aria-hidden="true"></i></li>
                                <li><i class="fa fa-cart-plus" aria-hidden="true"></i></li>
                                <li><i class="fa fa-heart-o" aria-hidden="true"></i></li>
                            </ul>
                        </div>
                    </li>
                    </ul>
                    
            </div>
            
         @endforeach

        
    </div>

.items-shop{
  margin-top: 40px;
  /* display: grid;
  grid-template-columns: auto auto auto auto; */
   /* flex: 0; */
   display: grid; 
  grid-template-columns: repeat(auto-fit,20%);
  grid-auto-rows: 22vmax;
  /* flex-direction: row; */
  justify-content: center;
  /* align-items: end; */
  /* align-items: unsafe; */
  /* align-items: stretch;  */
  /* align-content: space-between; */
  gap: 4em;
  row-gap: 8vmax;
  /* margin: 5px; */
}


.items-shop div:not(.last){
  /* border: 3px solid black;
 justify-content: center;
 display: flex;
 justify-content: center; */
 /* margin-bottom: 20vh; */
 
 border-bottom: 10vmax solid white;

  
  /* margin-bottom: 50px; */
}

.items-shop div img
{
  /* flex: 1; */
  object-fit: fill;
  width: 100%;
  height: 100%;
  
  
  /* border: 5px solid white; */
  
  /* object-fit: fill; */
}

.items-shop div a{
  display: inline;
  margin: 0;
  padding: 0;
}

.items-shop div ul
{
  list-style-type: none;
/* display: block; */
/* display: ; */
  margin: 0;
  padding: 0;
  
  /* overflow: hidden; */
  /* overflow-wrap: break-word; */
  /* word-break: unset; */
  /* margin-bottom: -25px; */
  /* border:solid white;
  border-width: 100%; */
  
  /* height: 25vh; */
  /* background-color: white; */
  /* inline-size: min-content; */
  
  /* font-size: clamp(30px,1vmax,60px); */
  font-size: 1vmax;
  
  /* word-wrap: none; */
  /* display: flex;
  flex-direction: column; */
  /* font-weight: bolder; */
  /* font-size: 70%; */
  /* overflow-x: auto; */
}

/* .items-shop div ul li
{
  
  align-items: end;
  word-break: break-all;
} */
 .prname
 {
  display: inline;
  margin: 0;
  /* white-space: pre; */
  /* word-break: keep-all; */
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  width: 20vw */
 }

 .items-shop hr
 {
  width: 99.9%;
  height: 1px;
  background: #ed1d61;
  font-size: 0;
  border: 0;
 }
.bottom-item
{
 
  display: flex;
  /* position: absolute; */
  top: 0;
  bottom: 0;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
  /* gap: 3em; */
}

.bottom-item li{
  
 padding: 5px ;

 /* height: 2vmax; */
 width: 2vmax;
 /* border: 2px solid; */

 /* box-shadow: 1px 2px rgba(0, 0, 0, 0.573); */
 background: linear-gradient(to right,rgb(51, 67, 148),rgb(68, 55, 140));
 /* font-size: 1vmax; */
 border-radius: 20px;
 text-align: center;
 align-content: baseline;
 /* display: inline-block; */
 /* max-width: 10px; */
 
}