TaskBuild .footer with display grid, grid-template-columns repeat(auto-fit, minmax(180px, 1fr)), gap var(--space-lg), padding var(--space-2xl) var(--space-lg), background var(--text), color oklch(0.85 0 0). .footer h4 has margin 0 0 var(--space-md), color white, font-size 13px, font-weight 600, text-transform uppercase, letter-spacing 0.05em. .footer ul has list-style none, padding 0, margin 0, display grid, gap 8px. .footer a has color inherit, text-decoration none, font-size 14px. .footer a:hover has color white. Four columns: Brand (with logo + tagline + social), Product (links), Company (links), Legal (links). .footer-bottom has display flex, justify-content space-between, padding var(--space-md) 0, border-top 1px solid white/10, grid-column 1 / -1, color oklch(0.65 0 0), font-size 13px.
Capstone 9: Footer (4-column responsive)
150 XP10 min
Theory
A site footer that scales
4 columns on desktop: Brand + 3 link groups. Collapses to 2 columns on tablet, 1 on phone. Auto-fit grid handles the reflow without media queries.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.