Files
wow-design-wiki/concepts/responsive-grid-layout.md
neo 76c4c5b4fe design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc.
- 147 files: DESIGN.md + README.md per brand (~2.1 MB)
- Each DESIGN.md contains structured brand analysis (colors, typography, components)
- Updated 00-overview.md with new design-systems directory
2026-06-21 20:40:35 +05:00

1.3 KiB
Raw Permalink Blame History

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