Mission 04 / CSS layout
Responsive Layout
Use CSS Grid for a two-dimensional dashboard and adapt it when the available width changes.
Medium75 XPGridMedia queries
Layout decision
Grid handles rows and columns together
The desktop dashboard reserves one column for navigation and lets the main content fill the remaining space. At a smaller width, the sidebar is hidden and the content becomes one column.
.dashboard {
display: grid;
grid-template-columns: 150px 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.dashboard { grid-template-columns: 1fr; }
.sidebar { display: none; }
}
Interactive preview
Change the available width
Dashboard
10Missions built
HTMLFoundation
JSCurrent focus
Self-review after using both views