CSS
Create a Responsive Auto-Fitting Grid of Cards
Build a dynamic and responsive grid layout for cards or items that automatically adjusts column count based on viewport width using `auto-fit` and `minmax`.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* Space between grid items */
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.card {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
text-align: center;
}
How it works: This CSS creates a responsive grid where items automatically adjust their layout based on available space. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` is the core here: `auto-fit` will create as many columns as can fit, each being at least `250px` wide but growing up to `1fr` (an equal fraction of the remaining space) if more space is available. `gap` adds consistent spacing between grid items.