Generator CSS Grid

Definiți coloanele și rândurile, selectați celulele pentru a plasa elementele și copiați codul CSS împreună cu cel HTML corespunzător printr-un singur clic.

Presetări
Elemente
CSS
HTML
Trageți cursorul peste grilă pentru a plasa un element.

Grila dumneavoastră este creată direct în browser. Nimic din ceea ce setați aici nu este încărcat pe BroBroGo.

Întrebări frecvente

Cum plasez elemente pe grilă?

Apăsați și trageți cursorul peste celule pentru a delimita un dreptunghi — când eliberați, acesta devine un element copil plasat care se întinde pe acele coloane și rânduri. Fiecare element pe care îl desenați primește propriile reguli grid-column și grid-row în CSS și un div corespunzător în HTML. Elementele se pot suprapune, iar cel desenat ulterior va fi poziționat deasupra; folosiți butonul × de pe un element pentru a-l elimina.

Pot avea coloane și rânduri de dimensiuni diferite?

Da. Fiecare rând sau coloană (track) are propria casetă de dimensiune, unde puteți introduce orice valoare specifică pentru grid — 1fr, 200px, auto, min-content sau minmax(120px, 1fr). Structurile care împart aceeași dimensiune sunt grupate automat în funcția repeat() pentru a păstra codul curat. Spațierea coloanelor (column gap) și cea a rândurilor (row gap) se setează separat și se unifică într-o singură proprietate gap atunci când valorile lor coincid.

Ce fac cu codul generat?

Copiați codul CSS și cel HTML în paralel. Codul HTML vă oferă containerul cu câte un div pentru fiecare element, iar codul CSS definește grila și poziționează fiecare element în parte. Introduceți ambele coduri în proiectul dumneavoastră pentru a obține exact aceeași structură pe care ați desenat-o aici.

Generator CSS Cubic BezierTrageți de cele două mânere pentru a modela o curbă de atenuare, urmăriți mișcarea unui punct comparativ cu una constantă și copiați valoarea cubic-bezier().Generator FlexboxConfigurați un container flex și elementele sale cu ajutorul controalelor vizuale, urmăriți modificările în timp real și copiați codul CSS printr-un singur clic.Generator Box ShadowTrageți de glisoare pentru a crea o umbră de tip box-shadow, suprapuneți straturi pentru profunzime și copiați instantaneu codul CSS rezultat.Generator de gradiențiCreați un gradient liniar, radial sau conic, adăugați puncte de oprire a culorii, setați direcția și copiați codul CSS rezultat printr-un singur clic.Generator Border RadiusRotunjiți fiecare colț cu ajutorul glisoarelor, creați forme organice cu modul eliptic și copiați instantaneu codul CSS.Calculator CSS clamp()Introduceți dimensiunile pentru ecrane mici și mari și obțineți o valoare fluidă clamp() care se scalează armonios între ele — ideală pentru dimensiuni de font, padding, margini sau spațieri.