CSS Grid Генератор: създавайте и преглеждайте оформления
CSS Grid Генератор е визуален CSS grid строител за задаване на колони, редове, разстояние и стойности за хоризонтално/вертикално подравняване на отделни елементи. Прегледът на живо показва мрежата, докато я настройвате. Генерирайте готов за поставяне блок, съдържащ grid-template-columns, grid-template-rows, gap и подравняване на елементите, след което копирайте нужните ви стойности за своя stylesheet.
CSS Grid Генератор е визуален CSS grid строител за създаване на CSS Grid стойности и преглед на резултата. Задайте колоните, редовете и разстоянието, след което вижте как мрежата се запълва на живо, докато работите. Той предлага бърз начин да изградите CSS Grid оформление онлайн и да подготвите стойности за употреба в stylesheet.
Строителят ви позволява да конфигурирате колони, редове и разстояние, заедно с настройки за хоризонтално и вертикално подравняване на отделни елементи. След като генерирате изхода, можете да копирате нужните ви стойности от готов за поставяне блок. Генерираният изход включва grid-template-columns, grid-template-rows, gap и подравняване на елементите, така че можете да видите ключовите декларации за оформление заедно.
CSS Grid е CSS система за оформление, докато генерираният блок е наборът от CSS стойности, които можете да добавите към stylesheet. Използването на визуалния преглед ви помага да разгледате мрежата, преди да копирате нейните стойности. Това може да е полезно при подготовка на пример за оформление, настройка на CSS за тестове или фикстури, или проучване на стойности за колони, редове, разстояние и подравняване, без да съставяте всяка декларация ръчно.
CSS Grid Генератор работи изцяло във вашия браузър. Вашият вход се обработва на вашето устройство и не се качва, съхранява или изпраща към сървър. След като страницата се е заредила, инструментът продължава да работи без връзка, така че можете да го използвате офлайн. Той е практичен базиран в браузъра CSS Grid строител за разработчици и DevOps инженери, които искат да прегледат настройките на мрежата и да копират получените CSS стойности.
Стъпка 1: Задайте опциите на мрежата, включително колоните, редовете и стойностите на разстоянието, които искате да използвате.
Стъпка 2: Изберете стойности за хоризонтално и вертикално подравняване на отделни елементи, за да контролирате подравняването им в мрежата.
Стъпка 3: Проверете прегледа на живо, за да видите как изглежда мрежата, докато настройвате нейните параметри.
Стъпка 4: Генерирайте CSS блока, след което копирайте нужните ви стойности във вашия stylesheet.
Случай на употреба: Създавайте готови за употреба CSS Grid стойности за тестове, фикстури или начални данни, вместо да пишете всяка декларация на ръка.
Случай на употреба: Изградете пример за мрежа за документация или демо, след което копирайте генерирания му CSS във вашия проект.
Случай на употреба: Преглеждайте различни настройки на колони и редове, докато работите върху оформление на страница.
Случай на употреба: Настройвайте разстоянието визуално, за да намерите стойност на отстояние, която подхожда на прототип.
Случай на употреба: Задавайте стойности за хоризонтално и вертикално подравняване на отделни елементи, когато подготвяте пример, демонстриращ подравняване на елементите.
Случай на употреба: Генерирайте готов за поставяне CSS блок, когато искате стойностите за grid-template-columns, grid-template-rows, gap и подравняване заедно.