Нажмите Ctrl+D, чтобы добавить страницу в закладки
Генератор CSS Grid — это бесплатный онлайн-инструмент, который визуально проектирует grid-макеты.
Как использовать Генератор CSS Grid?
Задайте количество строк и столбцов.
Перетаскивайте ячейки для объединения областей или настройки размещения.
Скопируйте сгенерированный код CSS Grid и используйте его в своём проекте.
Часто задаваемые вопросы о Генератор CSS Grid
В чём разница между CSS Grid и Flexbox?
CSS Grid предназначен для двумерных макетов (строки + столбцы), тогда как Flexbox — для одномерных (строка или столбец). Grid лучше подходит для сложных макетов страниц.
Что такое единица fr?
fr (fraction) — это пропорциональная единица, используемая в CSS Grid. Например, 1fr 2fr делит пространство в соотношении 1:2. Она очень полезна для адаптивных макетов.
Можно ли сделать адаптивную сетку без медиазапросов?
Можно. Запись repeat(auto-fit, minmax(240px, 1fr)) фиксирует лишь минимальную ширину колонки, а остальное браузер считает сам: колонки добавляются при расширении окна и убираются при сужении, покрывая всё от телефона до десктопа без единой контрольной точки. Учтите: auto-fill оставляет в остатке пустые треки, а auto-fit растягивает существующие, чтобы его заполнить, — поэтому при малом числе элементов результаты расходятся.
Длинное слово растягивает колонку сетки и ломает вёрстку.
У элементов сетки минимальный размер по умолчанию равен auto, поэтому они отказываются сжиматься уже своего содержимого: длинный URL или неразрывное слово раздвигает всю колонку. Свойство min-width: 0 на этом элементе снова позволяет сетке его сжать, а overflow-wrap: anywhere заставляет длинную строку переноситься. Объявление трека как minmax(0, 1fr) вместо простого 1fr убирает причину целиком — оттого приём и распространён.
Советы по эффективному использованию Генератор CSS Grid
repeat(auto-fit, minmax(240px, 1fr)) сам меняет число колонок — медиазапросы не нужны.
Отступы задавайте через gap, а не margin, иначе у последней колонки остаётся лишний зазор.
В сложных макетах называйте области через grid-template-areas — код останется читаемым.