Генератор CSS Grid

Grid раскладывает элементы сразу по двум осям: вы описываете колонки и строки, а браузер расставляет содержимое по ячейкам. Главная его находка — единица fr, доля свободного места. Запись 1fr 2fr означает, что вторая колонка получит вдвое больше остатка, и это работает при любой ширине окна без процентов и вычислений.

Колонки задаются списком, в котором можно смешивать fr, пиксели, auto и minmax. Функция minmax задаёт вилку: minmax(200px, 1fr) держит колонку не уже двухсот пикселей и отдаёт ей остаток, когда место есть. Вместе с repeat и auto-fit это даёт отзывчивую сетку без единого медиазапроса.

Предпросмотр в инструменте показывает, как сетка ведёт себя при изменении ширины: колонки переносятся, ячейки перестраиваются. Готовый код содержит и grid-template-columns, и gap, и области, если вы их назвали.

Опишите колонки списком и добавьте gap. Для карточек, которые должны сами переноситься, возьмите repeat(auto-fit, minmax(220px, 1fr)): при широком окне карточки встанут в ряд, при узком перенесутся, и ни одного медиазапроса не понадобится. Строки чаще всего оставляют на auto — они вырастут по содержимому.

Grid и Flexbox делят обязанности: сетка страницы удобнее гридом, ряд кнопок или элементы внутри карточки — флексом. Оба свойства работают на прямых потомках контейнера, вложенные элементы о сетке не знают. Одноосевую раскладку соберёт генератор Flexbox, а скруглить карточки поможет генератор border-radius. Именованные области делают код понятнее: вы задаёте сетку строками вроде «header header» и «sidebar main», и каждый блок получает своё имя вместо номеров линий. При правке раскладки достаточно переставить слова в шаблоне. Отрицательные номера линий считают с конца: grid-column: 1 / −1 растягивает элемент на всю ширину сетки независимо от числа колонок, и это самый частый приём для заголовков внутри карточной раскладки.

Проверяйте раскладку на узком экране в первую очередь. Grid чаще всего ломается там, где колонка получила фиксированную ширину в пикселях: на телефоне она не сжимается и выталкивает содержимое за край. Замена фиксированного значения на minmax с разумным минимумом решает это в одну правку.