---
title: Responsive Grid and Layout
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, layout]
sources:
  - raw/articles/web-design-research.md
  - raw/articles/crawford-20-principles.md
confidence: 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 может отличаться от визуального.