CSS
CSS Grid: Fluid Dashboard with `fr` Units
Build highly adaptable and fluid dashboard-style layouts using CSS Grid's fractional (`fr`) units to define columns and rows that grow and shrink proportionally.
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Three columns: 1 unit, 2 units, 1 unit wide */
grid-template-rows: auto 1fr 1fr; /* Three rows: auto height, 1 unit, 1 unit tall */
gap: 1.5rem;
min-height: 100vh; /* Example: ensure grid takes at least full viewport height */
padding: 1.5rem;
box-sizing: border-box;
font-family: Arial, sans-serif;
background-color: #f8f8f8;
}
.grid-item {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 1.5rem;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.item-header {
grid-column: 1 / -1; /* Spans all columns */
background-color: #e0f2f7;
}
.item-main {
grid-column: 2 / 4; /* Spans from the second column line to the end */
grid-row: 2 / 3; /* Occupies the second row */
background-color: #e8f5e9;
}
.item-sidebar {
grid-column: 1 / 2; /* Occupies the first column */
grid-row: 2 / 4; /* Spans two rows */
background-color: #fffde7;
}
.item-footer {
grid-column: 2 / -1; /* Spans from the second column line to the end */
grid-row: 3 / 4; /* Occupies the third row */
background-color: #ffebee;
}
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr; /* Single column layout on mobile */
grid-template-rows: auto auto auto auto auto; /* All items stack vertically */
min-height: auto; /* Allow height to expand based on content */
}
/* Reset item placement to flow naturally in a single column */
.item-header, .item-main, .item-sidebar, .item-footer {
grid-column: auto;
grid-row: auto;
}
}
How it works: This snippet creates a fluid, dashboard-like layout using CSS Grid's `fr` (fractional) units. `grid-template-columns: 1fr 2fr 1fr` creates three columns where the middle one is twice as wide as the outer ones, all scaling proportionally. `grid-template-rows: auto 1fr 1fr` creates rows where the header height is automatic, and the next two rows divide the remaining space equally. Individual items are then placed using `grid-column` and `grid-row` to define their exact position and span. A media query simplifies the layout to a single-column stack on smaller screens, showcasing its responsiveness.