CSS
Responsive Header with Logo, Navigation, and Action Items using Grid
Build a versatile and responsive header layout using CSS Grid, dynamically placing a logo, navigation links, and action buttons across different screen sizes.
.header {
display: grid;
grid-template-columns: auto 1fr auto; /* Logo, Navigation, Actions */
align-items: center; /* Vertically align items */
padding: 15px 20px;
background-color: #333;
color: #fff;
gap: 20px; /* Space between grid areas */
}
.header-logo {
/* grid-column: 1; Implied */
font-size: 1.5em;
font-weight: bold;
}
.header-nav {
/* grid-column: 2; Implied */
display: flex;
justify-content: center; /* Center navigation items */
gap: 15px;
}
.header-actions {
/* grid-column: 3; Implied */
display: flex;
gap: 10px;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.header {
grid-template-columns: 1fr auto; /* Logo/Nav stacked, Actions separate */
grid-template-rows: auto auto; /* Two rows */
gap: 10px;
}
.header-logo {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.header-nav {
grid-column: 1 / 3; /* Nav spans both columns */
grid-row: 2 / 3;
justify-content: flex-start; /* Align nav items to start */
}
.header-actions {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-content: flex-end; /* Align actions to end */
}
}
How it works: This snippet creates a responsive header using CSS Grid. By default, it uses `grid-template-columns: auto 1fr auto` to place a logo, a flexible navigation area, and action items. `align-items: center` ensures vertical alignment. A media query then reconfigures the grid for smaller screens, stacking the logo and navigation into two rows while keeping actions in the top row, right-aligned. This demonstrates `grid-template-columns`, `grid-template-rows`, `grid-column`, `grid-row`, and `gap` for complex responsive layouts.