CSS
Responsive Dashboard Grid with Dynamic Columns
Design a flexible and responsive dashboard layout using CSS Grid's `minmax` and `repeat(auto-fit)`, allowing grid items to automatically adjust and wrap based on viewport size.
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px; /* Optional: limit overall width */
margin: 0 auto; /* Optional: center the grid */
}
.dashboard-item {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Example content styles */
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 150px;
}
How it works: This CSS Grid snippet creates a highly responsive dashboard-like layout. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` is the core. `auto-fit` automatically creates as many columns as can fit, while `minmax(250px, 1fr)` ensures each column is at least 250px wide but grows to fill available space equally (`1fr`). This allows items to dynamically wrap to new rows as the screen size changes, maintaining a clean and adaptable layout. `gap` provides consistent spacing between items.