Responsive Layout Patterns

Master production-ready responsive layout patterns — navigation, hero sections, grids, sidebars, and footer layouts that work on every screen size.

50 min•By Priygop Team•Last updated: Feb 2026

Navigation & Layout Components

Responsive Navbar: display: flex; justify-content: space-between; align-items: center; — logo left, links center, CTA right. At mobile: hamburger menu with hidden checkbox trick or :has() selector for toggle
Mobile Menu: Off-canvas pattern — transform: translateX(-100%); transition: transform 300ms ease; becomes translateX(0) when active. Use position: fixed; inset: 0; for full-screen overlay
Sidebar Layout: CSS Grid — .layout { display: grid; grid-template-columns: 280px 1fr; } @media (max-width: 768px) { grid-template-columns: 1fr; }. Sidebar collapses on mobile
Hero Section: min-height: 80vh; display: grid; place-items: center; — centered content with background image using background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg') center/cover
Section Layout: .section { padding: var(--space-16) var(--space-4); } .container { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); } — consistent page sections with contained content
Footer: Multi-column grid — grid-template-columns: 2fr repeat(3, 1fr); at desktop. Collapses to single column on mobile. Logo/description in wide column, link groups in narrow columns

Auto-Fit Cards: .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); } — cards automatically wrap without media queries. Truly responsive
Masonry-Like: CSS columns — column-count: 3; column-gap: var(--space-4); .grid-item { break-inside: avoid; margin-bottom: var(--space-4); } — Pinterest-style layout without JavaScript
Responsive Table: At mobile, transform table to card layout — table, thead, tbody, tr, td { display: block; }. Use data attributes: td::before { content: attr(data-label); } for column labels
Form Layout: .form-group { display: grid; gap: var(--space-2); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } — two-column forms that stack on mobile
Holy Grail Layout: body { display: grid; grid-template: 'header header header' auto 'nav main aside' 1fr 'footer footer footer' auto / 200px 1fr 200px; min-height: 100dvh; } — classic layout with CSS Grid
Container Queries: @container (min-width: 400px) { .card { flex-direction: row; } } — components respond to their container, not the viewport. Add container-type: inline-size to parent