CSS Grid генератор
Визуальный генератор CSS Grid: постройте адаптивную сетку без кода и скопируйте результат в CSS или Tailwind.
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
CSS Grid - это мощная система компоновки, позволяющая создавать двумерные макеты с строками и столбцами.
Grid для двумерных макетов (строки и столбцы), а Flexbox для одномерных. Grid даёт больше контроля над сложными макетами.
Единица fr представляет долю доступного пространства в grid-контейнере. Например, 1fr 2fr создаёт два столбца, где второй в два раза шире первого.
Используйте функции auto-fit и minmax(). Например: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) автоматически адаптирует количество столбцов под ширину экрана.
Да! CSS Grid поддерживается всеми современными браузерами (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). Для старых браузеров используйте Flexbox как fallback.
Колонки задаёт свойство grid-template-columns, строки — grid-template-rows. Значения указывают в долях fr, пикселях, процентах или через minmax(). Например, grid-template-columns: 1fr 1fr 1fr создаёт три равные колонки. В генераторе выше это настраивается визуально, а код можно скопировать одной кнопкой.
Свойство gap задаёт расстояние между ячейками сетки. gap: 16px — одинаковый отступ по обеим осям; row-gap и column-gap задают вертикальный и горизонтальный отступы раздельно. В генераторе gap регулируется ползунком.
За выравнивание отвечают justify-items и align-items (положение каждого элемента внутри ячейки) и justify-content, align-content (положение всей сетки в контейнере). Доступные значения — start, center, end, stretch. Настройте их в генераторе и скопируйте готовый CSS.