CSS
Responsive Aspect Ratio Card Grid with CSS Grid
Build a responsive grid of cards that maintain a consistent aspect ratio using CSS Grid and the `aspect-ratio` property, ensuring uniform visual presentation across devices.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 15px;
background-color: #f5f5f5;
}
.card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.card-image-wrapper {
width: 100%;
aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
background-color: #ccc;
overflow: hidden;
}
.card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-content {
padding: 15px;
flex-grow: 1; /* Allow content to fill remaining space */
}
.card-title {
margin-top: 0;
margin-bottom: 8px;
font-size: 1.2em;
}
.card-description {
font-size: 0.9em;
color: #555;
}
How it works: This CSS Grid snippet creates a responsive card layout where each card's image maintains a specific aspect ratio using the `aspect-ratio` property. `grid-template-columns` ensures a flexible number of columns, while `gap` provides consistent spacing. Inside each card, Flexbox arranges content vertically, allowing text to grow and fill available space beneath the fixed-ratio image, leading to a clean and consistent card presentation.