.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 facing an issue with making this circle Div resize proportionally to maintain its aspect ratio. The desired look when the screen is resized can be seen in this image, and the current appearance can be viewed in this image.
The width of this grid expands to match the browser width, but I want the columns and their contents to adjust based on the screen size. Here's 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 structure:
<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>
I've attempted using flex display, but the columns get squeezed. Grid seems to work best for all screen sizes as it ensures the circle does not get distorted.