使网格 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>

我正在尝试使圆 Div 按比例调整大小，以保持纵横比。然而这并没有发生。以下是图片

How it should look like when the screen is resized

How it looks like!

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

.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 display，但列也被挤压了。然而，网格最适合所有屏幕尺寸，因为圆圈不会被挤压。

Answer 1

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

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

到

grid-template-columns: 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;
}

使网格 Div 响应

Make Grid Div responsive

html

css

responsive-design

css-grid