CSS
Responsive Grid Card Layout with auto-fit and minmax
Build a highly flexible and responsive grid for general content cards using `repeat(auto-fit, minmax())` to automatically adjust column counts.
.card-grid-container {
display: grid;
/* Adjusts column count based on available space and card minimum width */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 20px auto;
border: 2px solid #f44336;
}
.card {
background-color: #ffebee;
border: 1px solid #ef9a9a;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: sans-serif;
}
.card-title {
font-size: 1.2em;
margin-top: 0;
color: #b71c1c;
}
.card-content {
font-size: 0.9em;
line-height: 1.5;
color: #333;
flex-grow: 1; /* Ensures content takes available space, pushing buttons down */
}
.card-button {
margin-top: 15px;
padding: 10px 15px;
background-color: #f44336;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
align-self: flex-start; /* Aligns button to the start of its flex container */
}
.card-button:hover {
background-color: #d32f2f;
}
/* Add an image to a card for varied content, ensuring it's not primarily an 'image gallery' */
.card-with-image img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Card Grid</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Responsive Content Card Grid</h1>
<div class="card-grid-container">
<div class="card">
<h3 class="card-title">Service Offering 1</h3>
<p class="card-content">Discover our innovative solutions designed to streamline your workflow and boost productivity.</p>
<button class="card-button">Learn More</button>
</div>
<div class="card card-with-image">
<img src="https://via.placeholder.com/300x180/FFCDD2/B71C1C?text=Feature+Image" alt="Feature Image">
<h3 class="card-title">Product Highlight</h3>
<p class="card-content">Explore the new features of our flagship product and see how it can benefit you.</p>
<button class="card-button">View Details</button>
</div>
<div class="card">
<h3 class="card-title">Customer Story</h3>
<p class="card-content">Read about how our clients achieved success with our tailored approach and expert support.</p>
<button class="card-button">Read Story</button>
</div>
<div class="card">
<h3 class="card-title">Upcoming Event</h3>
<p class="card-content">Join us for our annual conference where industry leaders share their insights.</p>
<button class="card-button">Register Now</button>
</div>
<div class="card">
<h3 class="card-title">Developer Blog</h3>
<p class="card-content">Stay updated with our latest technical articles, tutorials, and best practices.</p>
<button class="card-button">Read Blog</button>
</div>
<div class="card card-with-image">
<img src="https://via.placeholder.com/300x180/E0F2F1/00796B?text=Another+Image" alt="Another Feature Image">
<h3 class="card-title">New Release!</h3>
<p class="card-content">We've just launched version 2.0 with exciting new capabilities and improvements.</p>
<button class="card-button">Check it Out</button>
</div>
</div>
</body>
</html>
How it works: This snippet creates a responsive grid layout for general content "cards" (e.g., product listings, blog posts, service features) using CSS Grid's `repeat(auto-fit, minmax(min_width, 1fr))`. `auto-fit` automatically adjusts the number of columns to fit the available space, and `minmax(280px, 1fr)` ensures each card is at least 280px wide but will grow to take equal fractions of the remaining space. This technique efficiently scales the grid columns based on the viewport width, providing an optimal display for various content types without explicitly setting media queries for column counts. This example is explicitly *not* an image gallery, featuring diverse content including titles, text, and buttons, with an optional image component to illustrate general content flexibility.