Generator CSS Grid

Structura și funcționarea Generatorului CSS Grid

Generatorul CSS Grid este un instrument vizual conceput pentru a simplifica proiectarea machetelor bidimensionale prin intermediul specificației CSS Grid Layout. Utilizatorul poate defini structura de bază a unei grile prin configurarea numerică a coloanelor și rândurilor, stabilirea dimensiunilor specifice pentru fiecare canal (track) și definirea spațiilor de separare.

Interfața permite interacțiunea directă prin glisarea cursorului peste celulele grilei pentru a plasa elemente copil. Pe măsură ce aceste acțiuni sunt efectuate, instrumentul generează în timp real codul CSS și HTML corespunzător, gata pentru a fi copiat și integrat în proiecte web.

Parametrii de intrare și configurarea grilei

Pentru a construi o grilă personalizată, instrumentul pune la dispoziție o serie de câmpuri de control numerice și textuale:

• Coloane: Se poate seta un număr de coloane cuprins între 1 și 12.
• Rânduri (Rows): Se poate seta un număr de rânduri cuprins între 1 și 12.
• Spațiere coloane: Definește distanța dintre coloane, acceptând valori numerice între 0 și 48px.
• Spațiere rânduri (Row gap): Definește distanța dintre rânduri, acceptând valori numerice între 0 și 48px.
• Dimensiuni coloane: Permite introducerea oricărei valori CSS valide pentru dimensiunea coloanelor, cum ar fi 1fr, 200px, auto, min-content sau minmax(120px, 1fr).
• Dimensiuni rânduri: Permite introducerea oricărei valori CSS valide pentru dimensiunea rândurilor, inclusiv unități flexibile, absolute sau funcții de dimensionare.
• Plasarea elementelor (Item placement): Se realizează prin apăsarea și tragerea cursorului peste celulele dorite pentru a marca o zonă dreptunghiulară.

Logica de generare a codului și regulile de comportament

Instrumentul funcționează pe baza unor reguli stricte de validare și optimizare a codului rezultat:

1. Plasarea elementelor prin glisare: În momentul în care se eliberează mouse-ul după glisarea peste celule, se creează un element copil care se întinde pe rândurile și coloanele selectate. Fiecare element primește propriile reguli grid-column și grid-row în CSS și un element div corespunzător în HTML.
2. Suprapunerea elementelor: Elementele plasate se pot suprapune. Elementul care este desenat mai târziu va fi poziționat deasupra celorlalte în ordinea de stivuire. Eliminarea unui element individual se face prin clic pe butonul "×" asociat acestuia.
3. Limitarea numărului de elemente: Generatorul acceptă plasarea a maximum 16 elemente în cadrul aceleiași grile.
4. Optimizarea sintaxei CSS:
   • Dacă mai multe canale (coloane sau rânduri) împart aceeași dimensiune, acestea sunt grupate automat în funcția repeat() în codul CSS generat.
   • Deși spațierea coloanelor și cea a rândurilor se configurează independent, proprietățile se unifică într-o singură regulă gap în CSS atunci când valorile lor sunt identice.
5. Tratarea erorilor de introducere: Dacă se introduce o valoare nevalidă (de exemplu, textul not-a-grid-track) în caseta pentru dimensiunea unui canal, câmpul de intrare este marcat ca nevalid. Cu toate acestea, codul CSS generat va păstra ultima valoare validă introdusă pentru a preveni defectarea machetei.
6. Controlul elementelor: Opțiunea "Șterge elementele" golește complet containerul HTML și resetează numărul de elemente la 0. Opțiunea "Adaugă element" generează un nou element în structura HTML.

Presetări de machete disponibile

Pentru a accelera procesul de prototipare, instrumentul include patru presetări structurale comune:

• Bară laterală: O structură clasică cu o zonă principală de conținut și o coloană laterală.
• Antet și subsol: O machetă pe rânduri care delimitează zonele superioare și inferioare ale paginii.
• Galerie: Această presetare generează automat o structură formată din 3 coloane, 2 rânduri și 3 elemente plasate.
• Tablou de bord (Dashboard): O configurație complexă, ideală pentru panouri de control și aplicații web.

Confidențialitate și procesarea datelor

Grila dumneavoastră este creată direct în browser. Nimic din ceea ce setați aici nu este încărcat pe BroBroGo. Toate calculele de poziționare, randarea vizuală și generarea codului sursă se execută local pe dispozitivul utilizatorului.

---

Întrebări frecvente (FAQ)

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.

Care este numărul maxim de elemente pe care le pot adăuga în grilă?

Generatorul acceptă adăugarea și plasarea a maximum 16 elemente individuale în cadrul aceleiași machete.