Tengo mi siguiente código, que el minmax en los rows implícitos debería aplicarse los 100px cuando se esté reduciendo y los 293px cuando esté totalmente apliado, pero cuando los reduzco no surte efecto los 100px y la imagen en lugar de resultar ser un cuadrado, resulta estirarse y el objetivo que deseo es que sea un cuadrado como cuando se visualiza en desktop, estoy utilizando CSS Grid Layout.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
}
.post-list {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 293px));
grid-auto-rows: minmax(100px, 293px);
justify-content: center;
gap: 28px;
}
.post {
cursor: pointer;
position: relative;
display: block;
}
.post-image {
margin: 0;
height: 100%;
}
.post-image img {
width: 100%;
object-fit: cover;
height: 100%;
}
.post-overlay {
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}
.post:hover .post-overlay {
display: flex;
}
.post-likes,
.post-comments {
display: inline-block;
width: 80px;
margin: 5px;
font-weight: bold;
text-align: center;
}
@media screen and (max-width: 768px) {
.post-list {
gap: 3px;
}
}
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Instagram</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<section class="post-list">
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610415221190-fa76adea6459?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610545472179-904ff243883b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
<a href=""
class="post">
<figure class="post-image">
<img src="https://images.unsplash.com/photo-1610564413021-5c3389add1a8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80"
alt="">
</figure>
<span class="post-overlay">
<p>
<span class="post-likes">150</span>
<span class="post-comments">10</span>
</p>
</span>
</a>
</section>
</body>
</html>