Генератор сетки CSS

Генератор сетки CSS является визуальным конструктором для макета сетки CSS Вы выбираете, сколько столбцов и строк вы хотите, выбираете размер дорожки для каждой оси, задаете промежутки и выравнивание, а сетка предварительного просмотра переставляется в реальном времени Точный CSS, который производит то, что вы видите, находится в поле готовности к копированию внизу, поэтому вам никогда не придется писать столбцы сетки-шаблона вручную или подсчитывать единицы дроби в вашей голове.

Краткий пример показывает, как выглядит этот CSS-выходной сигнал генератора сетки. Оставьте размер столбца на уровне 1fr, перетащите столбцы в 4 и строки в 1 и установите зазор столбца в 24px, а зазор строки в 16px. Предварительный просмотр показывает четыре равные ячейки в одной строке, а блок сгенерированной CSS считывает дисплей: сетку; сетка-шаблон-столбцы: повторить (4, 1fr); сетка-шаблон-строки: авто; зазор: 16px 24px; Сначала выходят значения зазора, затем столбец, который является порядком, который ожидает сокращение. Это вся работа генератора макета сетки CSS: настройки в правиле контейнера.

CSS Grid - это двумерная модель макета. В отличие от flexbox, который укладывает элементы по одной оси, сетка управляет строками и столбцами одновременно. Контейнер удерживает структуру посредством небольшого набора свойств: сетка-шаблон-столбцы и сетка-шаблоны-строки определяют дорожки, зазор добавляет расстояние между ними, а также элементы обоснования, элементы выравнивания, обоснование-содержание и выравнивание-содержимое позиционируют элементы и дорожки. Этот инструмент раскрывает эти свойства на одной панели и сразу показывает результат.

Генератор использует функцию повторения () для любой оси с более чем одной дорожкой, поэтому сетка-шаблон-столбцы: повтор (3, 1fr) - это то, что вы получаете для трехстолбчатой сетки из равных столбцов, а не повторяющегося списка. единица fr представляет собой часть свободного пространства в контейнере, что делает макеты сетки текучими: три столбца 1fr каждый занимают треть ширины и оплавления по мере изменения размера контейнера. Вы также можете смешивать дорожки авто, мин-контента, максимального содержания и фиксированного пикселя из меню размера дорожки.

Все работает полностью в вашем браузере. нет регистрации, ничего не загружается, и инструмент продолжает работать в автономном режиме после загрузки страницы. Это полезно как в качестве учебного пособия, поскольку вы можете наблюдать, как каждое свойство меняет макет, так и как быстрый способ создать готовую к производству сетку CSS для галереи, информационной панели, макета карты или полной оболочки страницы. Сгенерированное правило нацелено на класс .grid-контейнера и перечисляет только те свойства, которые имеют видимый эффект, поэтому вывод остается чистым.