Генератор CSS Grid

CSS Grid Layout — мощная двумерная система раскладки, позволяющая размещать элементы одновременно в строках и столбцах. В отличие от Flexbox, обрабатывающего одно направление за раз, Grid даёт полный контроль над обеими осями. Ключевые свойства: grid-template-columns для определения колонок, grid-template-rows для строк, gap для интервалов и grid-area для позиционирования элементов в именованных областях.

Используйте ползунок Columns для установки количества столбцов (от 1 до 12). Ползунок Rows — для строк (от 1 до 12). Настройте ползунок Gap для управления интервалами между ячейками (от 0 до 32px). Область предпросмотра показывает сетку в реальном времени с пронумерованными ячейками. Скопируйте сгенерированный CSS-код и вставьте его в свой проект.

grid-template-columns и grid-template-rows определяют размеры дорожек. Функция repeat() создаёт одинаковые дорожки, например repeat(3, 1fr) создаёт три равных столбца. Единица fr распределяет доступное пространство пропорционально. gap задаёт интервалы между строками и столбцами. При необходимости можно задать разные значения для row-gap и column-gap.

Святой Грааль: трёхколоночный заголовок, основной контент с боковой панелью. Карточки дашборда: repeat(auto-fill, minmax(250px, 1fr)) создаёт адаптивную сетку карточек. Герой на полную ширину с контентом ниже: одна колонка на все строки. Журнальный макет: смешанные диапазоны с grid-column и grid-row для разных размеров ячеек.

Используйте auto-fill или auto-fit с minmax() для текучих адаптивных сеток без медиазапросов. Комбинируйте с clamp() для гибких размеров. Установите минимальную ширину с minmax(200px, 1fr), чтобы элементы не становились слишком маленькими. Используйте медиазапросы для изменения количества столбцов на контрольных точках. Рассмотрите container queries для адаптивности на уровне компонентов.