I am facing an issue with my grid layout. Each element in the grid has an image and other divs below it. The problem arises when the screen size changes, causing the elements to scale automatically due to responsive width. I want all the images to have the same height while maintaining this responsiveness, similar to YouTube. How can I achieve this?
Here is a snippet of my grid:
JSX:
<div className="home-container">
{elements.map((el) => (
<Element el={el}></Element>
))}
</div>
CSS:
.home-container {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-left: 250px;
grid-auto-rows: 1fr;
grid-row-gap: 30px;
}
This is how each element card is structured:
JSX:
<div className="element-container">
<div className="element-img">
<img src={imageUrl} alt={title} />
</div>
<div>...</div>
<div>...</div>
</div>
CSS:
.element-container {
display: flex;
flex-direction: column;
box-sizing: border-box;
height: fit-content;
border-radius: 10px;
overflow: hidden;
}
.element-img {
display: flex;
margin-bottom: 20px;
}
.element-img > img {
width: 100%;
height: 100%;
border-radius: 20px;
object-fit: cover;
}
Issue: The problem occurs when the grid is resized as the aspect ratio of the images is not maintained consistently across all elements.