Building Responsive Layouts

Building Responsive Layouts

Quick Start

// Responsive grid with auto-fit
export function ResponsiveGrid({ children, minWidth = '300px' }: GridProps) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))`,
      gap: '1.5rem'
    }}>
      {children}
    </div>
  );
}

// With Tailwind
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

Features

Common Patterns

useMediaQuery Hook

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    setMatches(media.matches);
    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [query]);

  return matches;
}

// Usage
const isMobile = useMediaQuery('(max-width: 639px)');
const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');

Container Query Component

.card-container {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
    gap: 1rem;
  }
  .card-image { width: 40%; }
}

export function ResponsiveCard({ image, title, content }: CardProps) {
  return (
    <div className="card-container">
      <article className="card">
        <img src={image} alt="" className="card-image" />
        <div className="card-content">
          <h3>{title}</h3>
          <p>{content}</p>
        </div>
      </article>
    </div>
  );
}

Responsive Navigation

export function ResponsiveNav() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="relative">
      <div className="flex justify-between items-center h-16 px-4">
        <Logo />
        {/* Desktop nav */}
        <div className="hidden md:flex items-center space-x-8">
          <NavLink href="/">Home</NavLink>
          <NavLink href="/about">About</NavLink>
        </div>
        {/* Mobile menu button */}
        <button
          className="md:hidden p-2 min-h-[44px] min-w-[44px]"
          => setIsOpen(!isOpen)}
          aria-expanded={isOpen}
        >
          <span className="sr-only">{isOpen ? 'Close' : 'Open'} menu</span>
          {isOpen ? <XIcon /> : <MenuIcon />}
        </button>
      </div>
      {/* Mobile nav */}
      {isOpen && (
        <div className="md:hidden px-2 pb-3 space-y-1">
          <MobileNavLink href="/" => setIsOpen(false)}>Home</MobileNavLink>
          <MobileNavLink href="/about" => setIsOpen(false)}>About</MobileNavLink>
        </div>
      )}
    </nav>
  );
}

Best Practices

Converted and distributed by TomeVault — claim your Tome and manage your conversions.