Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/responsive-grid-layout.md

@@ -0,0 +1,31 @@
+---
+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 может отличаться от визуального.