使网格div响应迅速

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>

我正在尝试使Circle Div按比例地调整大小，以保持其长宽比。但是，这没有发生。以下是图像

当屏幕大小尺寸

它的外观！

该网格的宽度扩展了浏览器的宽度。我希望根据浏览器屏幕的大小调整列和其中的内容。以下是我的代码。

.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>

请帮助解决此问题。我尝试使用Flex显示屏，但列也被固定了。但是网格最适合所有屏幕尺寸，因为圆圈不会被弄脏。

Answer 1

我找到了我的代码解决方案。
我更改了下行
来自

网格 - 板块柱：重复（4，max-content）;

网格 - 板块柱：20％20％20％20％; >
和

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