Как я могу сделать мой макет div масштабируемым в сетке из 4 столбцов?

Question

У меня есть меню корзины, которое я заполняю элементами, в Интернете они отображаются как 4 столбца элементов, но на мобильном устройстве они отображаются как 3 столбца.

Кроме того, когда столбец отсутствует ' Я не хочу, чтобы элементы были выровнены по левому краю, но теперь они центрированы и выглядят неуместно.

Как я могу настроить их так, не перенаправляя на отдельную страницу для мобильных устройств?

Могу ли я добиться этого в процентах, а не в абсолютных величинах или другим способом?

index.html:
   <link rel="stylesheet" href="styles2.css" />

   <div class="imgbox">
    <img class="center-stretch" src="images/banner.png">
   </div>

   <section class="container content-section border">
   <div class="group-title">
  Item Group 1
   </div>

   <div class="shop-items">

    <div class="shop-item">
     <img class="shop-item-image" src="images/item1.jpg">
     <span class="shop-item-title">Item 1</span>
     <div class="shop-item-price">$10</div>
     <div class="shop-item-details">
      <button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
     </div>
    </div>

    <div class="shop-item">
     <img class="shop-item-image" src="images/item2.jpg">
     <span class="shop-item-title">Item 2</span>
     <div class="shop-item-price">$10</div>
     <div class="shop-item-details">
      <button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
     </div>
    </div>

    <div class="shop-item">
     <img class="shop-item-image" src="images/item3.jpg">
     <span class="shop-item-title">Item 3</span>
     <div class="shop-item-price">$10</div>
     <div class="shop-item-details">
      <button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
     </div>
    </div>

    <div class="shop-item">
     <img class="shop-item-image" src="images/item4.jpg">
     <span class="shop-item-title">Item 4</span>
     <div class="shop-item-price">$10</div>
     <div class="shop-item-details">
      <button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
     </div>
    </div>

    <div class="shop-item">
     <img class="shop-item-image" src="images/item5.jpg">
     <span class="shop-item-title">Item 5</span>
     <div class="shop-item-price">$10</div>
     <div class="shop-item-details">
      <button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
     </div>
    </div>

    <div class="shop-item">
     <img class="shop-item-image" src="images/item6.jpg">
     <span class="shop-item-title">Item 6</span>
     <div class="shop-item-price">$10</div>
     <div class="shop-item-details">
      <button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
     </div>
    </div>

    <div class="shop-item">
     <img class="shop-item-image" src="images/item7.jpg">
     <span class="shop-item-title">Item 7</span>
     <div class="shop-item-price">$10</div>
     <div class="shop-item-details">
      <button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
     </div>
    </div>

    <div class="shop-item">
     <img class="shop-item-image" src="images/item8.jpg">
     <span class="shop-item-title">Item 8</span>
     <div class="shop-item-price">$10</div>
     <div class="shop-item-details">
      <button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
     </div>
    </div>
</section>
        <footer class="main-footer">
            <div class="container main-footer-container">
                <img class="center-mini" src="images/banner.jpg">
            </div>
        </footer>

styles2.css:
@font-face {
    font-family: "Courier New";
    font-weight: normal;
    font-style: normal;
}

* {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Courier New", Courier, monospace;
    color: white;
}

.imgbox {
    display: grid;
    height: 100%;
}

.center-stretch {
    width: auto;
    max-height: 100vh;
    margin: auto;
}

.content-section {
    margin: 1em;
}

.container {
    width: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5em;
}

.border {
    border: 2px solid black;
}

.group-title {
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
    color: black;
    font-size: 2.5em;
}

.shop-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.shop-item {
    margin: 10px;
}

.shop-item-image {
    height: 250px;
}

.shop-item-title {
    font-size: 1.1em;
    display: block;
    flex-grow: 1;
    color: black;
    text-align: center;
    margin: 5px
}

.shop-item-price {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    color: black;
}

.shop-item-details {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.btn {
    text-align: center;
    vertical-align: middle;
    padding: .2em .2em;
    cursor: pointer;
}

.btn-primary {
    color: #52A3FF;
    border: 2px solid #52A3FF;
    background-color: white;
    padding: 0.5em 1.2em;
    border-radius: 0em;
}

.btn-primary:hover {
    background-color: #52A3FF;
    color: white;
}

.btn-addtocart {

}

.main-footer {
    background-color: #52A3FF;
    color: white;
    padding: .25em 0;
}

.main-footer-container {
    display: flex;
    align-items: center;
}

.center-mini {
    width: 40%;
    max-height: 100vh;
    margin: auto;
}