CSS Grid Генератор

Поставете ги Вашите колони и редови, повлечете преку ќелиите за да поставите елементи и копирајте го CSS-кодот за мрежата со соодветниот HTML со еден клик.

Претпоставки
Елементи
CSS
HTML
Повлечете преку мрежата за да поставите елемент.

Вашата мрежа се гради директно во Вашиот прелистувач. Ништо од она што го поставувате тука не се испраќа на BroBroGo.

ЧПП

Како да поставам елементи на мрежата (grid)?

Притиснете и повлечете преку ќелиите за да означите правоаголник — кога ќе пуштите, тој станува поставен подреден елемент што ги опфаќа тие колони и редови. Секој елемент што ќе го нацртате добива сопствено grid-column и grid-row правило во CSS и соодветен div во HTML. Елементите може да се преклопуваат, при што оној што е нацртан подоцна стои најгоре; користете го знакот × на елементот за да го отстраните.

Може ли колоните и редовите да бидат со различни големини?

Да. Секоја патека има сопствено поле за големина и таму можете да внесете која било вредност за grid — 1fr, 200px, auto, min-content или minmax(120px, 1fr). Патеките што споделуваат иста големина се спојуваат во repeat() за излезот да остане краток. Празнините меѓу колоните и редовите се поставуваат посебно и се спојуваат во една празнина (gap) кога се совпаѓаат.

Што да правам со генерираниот код?

Копирајте ги CSS и HTML кодовите напоредно. HTML-кодот ви го дава контејнерот со еден div за секој елемент, а CSS-кодот ја дефинира мрежата и го позиционира секој елемент. Вметнете ги двете во Вашиот проект и ќе го добиете истиот распоред што го нацртавте тука.

CSS Cubic Bezier ГенераторПовлечете ги двете рачки за да обликувате крива на транзиција, следете го движењето на точката во споредба со рамномерното и копирајте ја вредноста cubic-bezier().Генератор на FlexboxПоставете flex контејнер и неговите елементи со визуелни контроли, следете ги промените во живо и копирајте го CSS-кодот со еден клик.Генератор на Box ShadowПовлечете ги лизгачите за да обликувате box-shadow, наредете слоеви за длабочина и копирајте го готовиот CSS веднаш.Генератор на градиентиНаправете линеарен, радијален или коничен градиент, додајте точки на боја, поставете насока и копирајте го CSS-кодот со еден клик.Генератор на Border RadiusЗаоблете го секој агол со лизгачи, обликувајте органски форми со елиптичниот режим и копирајте го CSS-кодот веднаш.Калкулатор за CSS clamp()Внесете големина за мали и големи екрани и добијте флуидна clamp() вредност што се скалира непречено помеѓу нив — за големини на фонтови, внатрешни и надворешни маргини или празнини.