Генератор CSS Grid
Задайте количество колонок и строк, выделите ячейки для размещения элементов и скопируйте готовый CSS-код вместе с HTML в один клик.
Ваша сетка создается прямо в вашем браузере. Никакие заданные вами параметры не отправляются на BroBroGo.
Частые вопросы
Как размещать элементы на сетке?
Зажмите кнопку мыши и проведите по ячейкам, чтобы выделить прямоугольную область — когда вы отпустите кнопку, она станет размещенным дочерним элементом, охватывающим эти колонки и строки. Каждому нарисованному элементу в CSS будут соответствовать свойства grid-column и grid-row, а в HTML — соответствующий тег div. Элементы могут перекрываться, при этом созданный позже элемент окажется сверху; для удаления элемента используйте иконку «×».
Могут ли колонки и строки быть разного размера?
Да. У каждой полосы (трека) есть свое поле размера, куда можно ввести любое валидное значение сетки — например, 1fr, 200px, auto, min-content или minmax(120px, 1fr). Треки с одинаковым размером автоматически группируются в функцию repeat(), чтобы код оставался лаконичным. Интервалы между колонками и строками настраиваются отдельно, но объединяются в одно свойство gap, если их значения совпадают.
Что делать со сгенерированным кодом?
Скопируйте сгенерированные CSS и HTML. HTML-код содержит контейнер с div-элементами для каждого блока, а CSS определяет структуру сетки и позиционирует каждый элемент. Вставьте оба фрагмента кода в свой проект, чтобы получить точно такой же макет, какой вы нарисовали здесь.