wow-design-wiki/concepts/responsive-grid-layout.md

title, created, updated, type, tags, sources, confidence

title	created	updated	type	tags	sources	confidence
Responsive Grid and Layout	2026-06-02	2026-06-02	concept	web-design layout	raw/articles/web-design-research.md raw/articles/crawford-20-principles.md	high

Responsive Grid and Layout — Сетки и раскладка

Сетки

• 12-колоночная — стандарт для desktop (1440px+)
• 4-колоночная — для mobile (360×800)
• Bento Grid — модульная сетка (Apple-стиль, популярна в 2025–2026)
• CSS Grid — для макета страницы
• Flexbox — для компонентов

Container Queries

Новый стандарт адаптивности: компонент подстраивается под свой контейнер, а не viewport. Позволяет: один компонент → разная раскладка в разных контекстах.

White Space

Cluttered = cheap. Spacious = premium. Crawford: "white space = секрет премиальности".

Mobile-First Layout

Начинать с 1 колонки, добавлять колонки на больших экранах. Content → sidebar → header → footer — порядок в HTML может отличаться от визуального.