Make Grid Div responsive

Question

.subcategory-main-wrapper {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  position: absolute;
  width: 100%;
  column-gap: 4%;
  justify-content: center;
  height: 360px;
  @media @tabletScreens {
    height: 280px;
  }
  @media @mobileScreens {
    height: 450px;
    row-gap: 30px;
    column-gap: 7%;
    grid-template-columns: repeat(2, max-content);
  }
}

.subcategory-image-container {
  width: 278px;
  height: 278px;
  border-radius: 50%;
  background-color: black;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="category-container">
  <div class="subcategory-main-wrapper">
    <div class="subcategory-container">
      <div class="subcategory-image-container">
      </div>
    </div>
    <div class="subcategory-container">
      <div class="subcategory-image-container">
      </div>
    </div>
    <div class="subcategory-container">
      <div class="subcategory-image-container">
      </div>
    </div>
    <div class="subcategory-container">
      <div class="subcategory-image-container">
      </div>
    </div>
  </div>

I'm trying to make the circle Div resize proportionally so that it maintains it aspect ratio. However this not happening. Below are the images

How it should look like when the screen is resized

How it looks like!

The width of this grid extends the width of the browser. I want the columns and the contents in them to be resized based on the size of the browser screen. Below is my code.

.subcategory-main-wrapper {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    position: absolute;
    bottom: 25px;
    width: 100%;
    column-gap: 4%;
    justify-content: center;
    height: 360px;
    @media @tabletScreens{
        height: 280px;
        bottom: 12px;
    }
    @media @mobileScreens {
        height: 450px;
        bottom: 35px;
        row-gap: 30px;
        column-gap: 7%;
        grid-template-columns: repeat(2, max-content);
    }
}
.subcategory-image-container{
    width: 278px;
    height: 278px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

HTML:

<div class="category-container">
<div class="subcategory-main-wrapper">
        <div class="subcategory-container">
        {% if model.config.titleSubCategoryImageOne %}
        <div id="image-1-{{model.id}}" class="subcategory-image-container">
            
        </div>
            <div class="subcategory-title">
                <a href="{{model.config.subCategoryLinkOne}}">
                    {{model.config.titleSubCategoryImageOne}}
                </a>    
         </div>
    </div>
</div>

Please help resolve this. I have tried using flex display but the columns get squezed also. However grid works best for all screen sizes as the circle does not get squezzed.

Answer 1

I found solution for my code. I changed the below line from

grid-template-columns: repeat(4, max-content);

to

grid-template-columns: 20% 20% 20% 20%; and

.subcategory-image-container{
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}