CSS
Dynamic Responsive Grid with Auto-Adjusting Columns
Create highly flexible and responsive grid layouts in CSS that automatically adjust the number of columns based on screen size and available space using 'auto-fit' or 'auto-fill' with 'minmax'.
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
How it works: This CSS snippet demonstrates how to create a responsive grid that automatically adjusts the number of columns. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));` instructs the grid to create as many columns as can fit, with each column being at least `250px` wide and shrinking to `1fr` if more space is available. `auto-fit` expands items to fill available space in the last row, while `auto-fill` maintains empty tracks. The `gap` property ensures consistent spacing between items.