32 lines
1.3 KiB
Markdown
32 lines
1.3 KiB
Markdown
---
|
||
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 может отличаться от визуального.
|