Основная концепция

• Mobile First архитектура.
• Минимальный DOM.
• Предсказуемая адаптивная сетка.
• Стабильный CLS (без скачков интерфейса).
• Максимальная совместимость с Google Mobile First Indexing.
• Поддержка ecommerce, блогов, категорий, карточек товаров.
• Без тяжелых JS-layout библиотек.
• Приоритет CSS-native решений.

Зона	Shell (header, stick, nav)	Сетка карточек
0–479	1 колонка, stick скрыт/overlay	1 колонка (minmax)
480+	—	до 2 колонок автоматически
768+	stick fixed, боковые блоки	3–4 колонки
1024+	основной desktop layout	~5 колонок в .container
1440+	full‑bleed фон	без изменений (cap 1432)

Требования к layout

Контейнер

.container{
    width:min(100% - 24px, 1440px);
    margin-inline:auto;
}

Требования:

• контент центрируется;
• без фиксированной ширины;
• боковые отступы сохраняются на мобильных.

Сетка товаров / контента

Использовать только CSS Grid

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px;
}

Требования:

• auto-fill/minmax обязательно;
• без float;
• без masonry;
• без absolute positioning;
• без JS-перестроения layout.

Mobile First

Сетка проектируется начиная с 320px ширины.

Минимальные требования:

Ширина	Колонки
320–480px	2
481–768px	2–3
769–1200px	4–5
1200px+	auto-fit

Карточка товара

Структура

<article class="card">
    <a class="card-image"></a>
    <div class="card-body"></div>
    <div class="card-footer"></div>
</article>

Карточка должна быть flex-column

.card{
    display:flex;
    flex-direction:column;
}

Нижняя часть карточки:

.card-footer{
    margin-top:auto;
}

Требование:

• кнопки,
• цены,
• рейтинг

должны находиться на одной визуальной линии.

Изображения

Обязательно aspect-ratio

.card-image{
    aspect-ratio:1/1;
}

Изображение:

.card-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

CLS / стабильность интерфейса

Обязательные требования:

• width/height у изображений;
• aspect-ratio у медиа;
• reserve space для lazy-loaded блоков;
• запрещены скачки контента;
• запрещено динамическое изменение высоты карточек после загрузки.

Lazy Loading

Разрешено:

• только для элементов ниже первого экрана.

Запрещено:

• lazy-load LCP изображения;
• lazy-load первого ряда товаров.

Typography

Требования:

• заголовок максимум 2 строки;
• line-clamp;
• единый baseline текста.

Пример:

.title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

Container Queries

Приоритет container queries над media queries.

Пример:

@container (min-width:700px){
    .card{
        grid-template-columns:120px 1fr;
    }
}

Производительность

Запрещено:

• тяжелые карусели;
• layout shift анимации;
• JS masonry;
• reflow-heavy скрипты.

Требования:

• минимальный runtime JS;
• CSS-first rendering;
• критический CSS inline;
• GPU-safe animations only.

SEO требования

Обязательно:

• SSR/HTML-first;
• ссылки через <a href>;
• индексируемый HTML без ожидания JS;
• schema.org/Product;
• canonical URL;
• нормальная пагинация;
• alt у изображений.

UX требования

• hover не должен быть обязательным;
• вся функциональность доступна на touch;
• кнопки минимум 40x40px;
• стабильный scroll experience;
• предсказуемый layout.

Запрещено

• Pinterest/masonry сетки;
• бесконечные layout recalculation;
• CLS-анимации;
• скрытие контента на mobile;
• отдельная mobile-версия сайта;
• nested grids без необходимости.

Целевые показатели

Метрика	Цель
CLS	< 0.05
LCP	< 2.5s
INP	< 200ms
Lighthouse Mobile	90+

Архитектурная цель

Сетка должна:

• одинаково стабильно работать на mobile и desktop;
• быть SEO-safe;
• выдерживать тысячи карточек;
• легко переиспользоваться для:
  • каталога,
  • блогов,
  • related products,
  • категорий,
  • search results.