.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}Что такое генератор сетки CSS?
Генератор сетки CSS является визуальным конструктором для макета сетки CSS Вы выбираете, сколько столбцов и строк вы хотите, выбираете размер дорожки для каждой оси, задаете промежутки и выравнивание, а сетка предварительного просмотра переставляется в реальном времени Точный CSS, который производит то, что вы видите, находится в поле готовности к копированию внизу, поэтому вам никогда не придется писать столбцы сетки-шаблона вручную или подсчитывать единицы дроби в вашей голове.
CSS Grid - это двумерная модель макета. В отличие от flexbox, который укладывает элементы по одной оси, сетка управляет строками и столбцами одновременно. Контейнер удерживает структуру посредством небольшого набора свойств: сетка-шаблон-столбцы и сетка-шаблоны-строки определяют дорожки, зазор добавляет расстояние между ними, а также элементы обоснования, элементы выравнивания, обоснование-содержание и выравнивание-содержимое позиционируют элементы и дорожки. Этот инструмент раскрывает эти свойства на одной панели и сразу показывает результат.
Генератор использует функцию повторения () для любой оси с более чем одной дорожкой, поэтому сетка-шаблон-столбцы: повтор (3, 1fr) - это то, что вы получаете для трехстолбчатой сетки из равных столбцов, а не повторяющегося списка. единица fr представляет собой часть свободного пространства в контейнере, что делает макеты сетки текучими: три столбца 1fr каждый занимают треть ширины и оплавления по мере изменения размера контейнера. Вы также можете смешивать дорожки авто, мин-контента, максимального содержания и фиксированного пикселя из меню размера дорожки.
Все работает полностью в вашем браузере. нет регистрации, ничего не загружается, и инструмент продолжает работать в автономном режиме после загрузки страницы. Это полезно как в качестве учебного пособия, поскольку вы можете наблюдать, как каждое свойство меняет макет, так и как быстрый способ создать готовую к производству сетку CSS для галереи, информационной панели, макета карты или полной оболочки страницы. Сгенерированное правило нацелено на класс .grid-контейнера и перечисляет только те свойства, которые имеют видимый эффект, поэтому вывод остается чистым.
Как использовать генератор сетки CSS?
Установить столбцы и строки
Выберите, сколько столбцов и строк должна быть в сетке, и посмотрите предварительный просмотр, создайте ячейки.
Выберите размеры дорожек
Выберите размер столбцов и строк, например 1fr, auto, min-content или фиксированное значение пикселя.
Пробелы в настройке и выравнивание
Установите пробелы в строках и столбцах, затем отрегулируйте обоснование и выравнивание по позициям элементов и дорожек.
Скопируйте CSS
Скопируйте сгенерированное правило сетки и вставьте его в таблицу стилей или продолжайте настраивать предварительный просмотр.
Основные характеристики
Живой превью
Настоящая сетка меняется при изменении столбцов, строк, размеров дорожек, зазоров и выравнивания.
повторить () выход
Многодорожечные оси используют повтор () для коротких, читаемых значений шаблона сетки вместо повторяющихся списков.
fr и треки контента
Выбирайте единицы дроби, авто, min-content, max-content или фиксированные пиксели для каждой оси.
Раздельные зазоры между строками и столбцами
Устанавливайте пробелы независимо; инструмент автоматически выдает сокращение зазора или одно значение.
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
JWT Generator
Generate and sign JSON Web Tokens with HS256, HS384, or HS512, add standard claims, and copy the token. Runs client-side.
Comments
0 comments
No comments yet. Be the first to share your thoughts!