Адаптивная сетка карточек без медиазапросов

Проверьте прямо сейчас

Сдвигайте ползунок. Вы меняете минимальную ширину карточки — сетка мгновенно решает, сколько колонок поместится. На телефоне она сама станет одноколоночной.

Главная польза: вам не нужно заранее писать «три колонки», «две колонки», «одна колонка» и поддерживать несколько медиазапросов.

Готовый CSS

Добавьте класс cards контейнеру. Число 280px — это единственный параметр, который обычно нужно менять под свой дизайн.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

HTML-каркас

<section class="cards">
  <article class="card">Первая карточка</article>
  <article class="card">Вторая карточка</article>
  <article class="card">Третья карточка</article>
</section>

Что здесь происходит

• display: grid включает сетку.
• auto-fit создаёт столько колонок, сколько реально помещается, и не оставляет пустые колонки.
• minmax(..., 1fr) запрещает карточке стать уже заданного размера, а свободное место делит между карточками поровну.
• min(100%, 280px) защищает узкий телефон: карточка не станет шире экрана даже при выбранных 280 пикселях.

Если карточки содержат изображение, заголовок и кнопку — дайте им одинаковую внутреннюю структуру. Тогда сетка будет выглядеть ровно даже при разных текстах.

Где это сразу пригодится

• карточки услуг и разделов сайта;
• статьи и подборки материалов;
• галереи проектов и портфолио;
• товары, тарифы и готовые сборки ПК;
• каталог файлов или шаблонов.