CSS
Dynamic Dashboard Layout with CSS Grid
Build a dynamic and responsive dashboard-style layout using CSS Grid, leveraging fractional units and `grid-auto-rows` for flexible, content-adapting containers.
.dashboard-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Example: 3 columns with flexible ratios */
grid-auto-rows: minmax(100px, auto); /* Rows adjust to content, minimum 100px */
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.dashboard-item {
padding: 15px;
border: 1px solid #ddd;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.item-span-2-cols {
grid-column: span 2; /* Item spans two columns */
}
.item-span-2-rows {
grid-row: span 2; /* Item spans two rows */
}
How it works: This snippet showcases a dynamic dashboard layout using CSS Grid. `grid-template-columns` employs fractional units (`fr`) for flexible column widths that adapt to the container size. `grid-auto-rows: minmax(100px, auto)` ensures that rows have a minimum height but will expand vertically to accommodate their content. Specific dashboard items can then span multiple columns or rows using `grid-column: span X` and `grid-row: span Y` for a highly versatile and organized layout.