Визуално проектиране на уеб оформления с CSS Grid Генератор
Инструментът CSS Grid Генератор позволява визуално да проектирате оформление на CSS мрежа (grid layout). С него можете лесно да задавате броя на колоните и редовете, да дефинирате техните размери и да определяте разстоянията между тях. Чрез влачене по самата мрежа разполагате елементи в рамките на оформлението. Инструментът автоматично генерира съответния CSS и HTML код за проектираната от Вас мрежа, който можете да копирате и поставите директно във Вашия собствен проект.
Този инструмент е изключително полезен за широк кръг от задачи:
- За бързо създаване на прототип на оформление с CSS grid.
- За генериране на CSS и HTML код за мрежово оформление, без да се налага да го пишете ръчно.
- За визуализиране на начина, по който различните размери на колоните и редовете влияят върху цялостното оформление.
- За създаване на структури с готови шаблони като странична лента, хедър/футър, галерия или табло.
Входни параметри и конфигуриране на мрежата
За да изградите Вашата персонализирана мрежа, инструментът предоставя следните контроли и възможности за въвеждане на данни:
- Колони: Можете да зададете брой на колоните между 1 и 12.
- Редове (Rows): Можете да зададете брой на редовете между 1 и 12.
- Разстояние между колоните: Стойност между 0 и 48px.
- Разстояние между редовете (Row gap): Стойност между 0 и 48px.
- Размери на колоните: Всяка валидна CSS grid стойност, като например
1fr,200px,auto,min-contentилиminmax(120px, 1fr). - Размери на редовете: Всяка валидна CSS grid стойност, като например
1fr,200px,auto,min-contentилиminmax(120px, 1fr). - Разполагане на елементи (Item placement): Извършва се чрез влачене на мишката през клетките за маркиране на правоъгълна област.
Всеки ред или колона (track) разполага със собствено поле за размер, където можете да въведете желаната стойност. Ако въведете невалидна стойност (например not-a-grid-track) в някое от полетата за размер, съответното входно поле се маркира като невалидно, но генерираният CSS код запазва последната въведена валидна стойност.
Правила за разполагане на елементите и поведение на инструмента
При работа с визуалния интерфейс на генератора важат следните правила и специфики:
- Чертане на елементи: Когато влачите през клетките на мрежата и пуснете бутона на мишката, се създава разположен дочерен елемент, който обхваща избраните колони и редове.
- Индивидуални правила: Всеки начертан елемент получава свое собствено CSS правило за
grid-columnиgrid-row, както и съответстващdivелемент в HTML кода. - Застъпване: Елементите могат да се застъпват един друг. В този случай елементът, който е начертан по-късно, се позиционира най-отгоре.
- Премахване: Можете да изтриете конкретен елемент, като щракнете върху символа „×“ върху него.
- Ограничение на броя: Инструментът поддържа разполагането на максимум 16 елемента едновременно.
- Бутони за управление:
- Действието Добавяне на елемент генерира HTML елемент.
- Действието Изчистване на елементите премахва всички разположени обекти, което води до празен HTML контейнер и брой от 0 елемента.
Използване на готови шаблони
За да ускорите процеса на разработка, CSS Grid Генераторът предлага няколко вградени шаблона за често срещани оформления:
- Странична лента
- Хедър и футър
- Галерия: Този шаблон автоматично генерира структура от 3 колони, 2 реда и 3 разположени елемента.
- Табло (Dashboard)
Тези шаблони Ви позволяват моментално да заредите стандартни структури и да ги доразвиете според нуждите на Вашия проект.
Генериран изходен код и оптимизации
Инструментът автоматично компилира Вашите визуални настройки в чист код, готов за внедряване:
- CSS: Генерира се CSS код за контейнера на мрежата (grid container) и за всеки отделно разположен елемент.
- HTML: Генерира се HTML код за контейнера на мрежата, съдържащ
divелементи за всеки от разположените елементи.
Оптимизации в CSS кода:
- Групиране с
repeat(): Колоните или редовете, които споделят един и същ размер, се обединяват автоматично чрез функциятаrepeat()в изходния CSS код, за да се осигури по-кратка и чиста дефиниция. - Обединяване на разстоянията: Параметрите за разстояние между колоните и разстояние между редовете се настройват независимо. Въпреки това, ако стойностите им съвпадат, те се съкращават до едно общо CSS свойство
gapв генерирания код.
Поверителност и обработка на данните
Вашата поверителност е напълно защитена при използването на този инструмент. Вашата мрежа се изгражда директно във Вашия браузър. Нищо от това, което настройвате тук, не се изпраща към BroBroGo. Цялата обработка и генериране на код се извършват локално на Вашето устройство.
Често задавани въпроси (FAQ)
Как да разполагам елементи върху мрежата?
Натиснете и плъзнете по клетките, за да очертаете правоъгълник — когато пуснете бутона, той се превръща в разположен елемент, обхващащ тези колони и редове. Всеки начертан елемент получава собствено grid-column и grid-row правило в CSS и съответстващ div в HTML. Елементите могат да се застъпват, като начертаният по-късно застава най-отгоре; използвайте символа „×“ върху елемента, за да го премахнете.
Могат ли колоните и редовете да бъдат с различни размери?
Да. Всеки ред или колона (track) има собствено поле за размер, където можете да въведете всякаква grid стойност — 1fr, 200px, auto, min-content или minmax(120px, 1fr). Редовете/колоните, които споделят еднакъв размер, се групират в repeat(), за да остане изходният код кратък. Разстоянието между колоните и редовете се задават отделно и се обединяват в общо свойство gap, когато съвпадат.
Какво да правя с генерирания код?
Копирайте CSS и HTML кодовете заедно. HTML кодът Ви дава контейнера с по един div за всеки елемент, а CSS дефинира мрежата и позиционира всеки елемент. Поставете и двата кода във Вашия проект и ще получите същото оформление, което сте начертали тук.