79. Grid Practical: Creating a Complex Dashboard Layout

Grid Areas shine when building non-uniform, complex interfaces like dashboards, where items need to occupy various cells.

Desired Layout (Visualized):

Implementation using Grid Areas

We define 3 columns and 3 rows.

css .dashboard-grid { display: grid; /* Define Column widths / grid-template-columns: 150px 1fr 200px; / Define Row heights */ grid-template-rows: 150px 1fr 50px; gap: 10px;

/* Map the entire layout */ grid-template-areas: "nav header header" "nav main sidebar" "footer footer footer"; }

/* Assign items to the named areas */ .nav-menu { grid-area: nav; } .header { grid-area: header; } .main-section{ grid-area: main; } .side-bar { grid-area: sidebar; } .page-footer { grid-area: footer; }

Benefit: To completely change the layout (e.g., move the sidebar below the nav), you only edit the grid-template-areas property, leaving the item styling intact.