Generator de layout CSS

Previzualizează o aranjare Flexbox sau Grid.

Pe dispozitivul tău · Fără cont

Generator de layout CSS prelucrează datele introduse în acest browser. Datele introduse și rezultatele sunt excluse din analizele de trafic. Lista instrumentelor recente salvează numele instrumentelor, numărul de vizite și momentul ultimei vizite. Lista instrumentelor salvate păstrează doar numele acestora. Salvarea ciornelor este opțională și se face pe acest dispozitiv; șterge textul salvat folosind comenzile pentru ciornă. Încărcarea textului de la un URL este opțională și contactează serverul respectiv; serverul vede URL-ul și adresa ta IP. Acțiunea opțională „Folosește în” păstrează în această filă datele de transferat. Următorul instrument le șterge la deschidere și le ignoră dacă a trecut mai mult de un minut.

Opțiunea „Copiază linkul” include în adresă datele introduse pe care alegi să le distribui. Oricine are linkul le poate redeschide. Fișierele și rezultatele generate sunt excluse. Instrumentele pentru parole și chei distribuie doar setările.

Română

Etichetele elementelor, câte una pe rând

Aranjare

Opțiuni și fișier de pe dispozitiv

Coloane Grid

Spațiu între elemente (px)

Dimensiunea de bază Flexbox (px)

Deschide un fișier text de pe acest dispozitiv

Setările opționale se aplică doar în această filă.

Rezultatul tău

Cod sursă HTML

Mai mult

Comenzi rapide de la tastatură

Despre linkuri și resetare

Linkurile includ datele introduse și setările tale. Oricine are linkul le poate vedea, așa că nu include text privat. Fișierele și rezultatele generate nu sunt incluse; extragerile aleatorii se repetă.

Resetarea reîncarcă instrumentul cu valorile inițiale, închide fișierele deschise și oprește accesul la dispozitive. Ciornele salvate rămân pe acest dispozitiv până le ștergi.

Cum funcționează generatorul de layout CSS

Generează o aranjare Grid adaptabilă sau Flexbox cu trecere pe rânduri noi, pornind de la etichetele elementelor. Schimbă numărul de coloane, spațiul dintre elemente sau dimensiunea de bază Flexbox, apoi copiază sau descarcă același document HTML de sine stătător folosit în previzualizare.

În continuare: Formatare CSS

În continuare: Calculator de specificitate CSS

În continuare: Verificare contrast

Exemplu

O grilă cu trei coloane folosește repeat(3, minmax(0, 1fr)), astfel încât etichetele lungi să poată trece pe mai multe rânduri în coloane de lățime egală. Flexbox trece elementele pe rânduri noi în funcție de dimensiunea lor de bază preferată și de spațiul disponibil.

Înainte de a folosi rezultatul

Oferă un punct de pornire pentru aranjarea elementelor, nu un constructor complet de site-uri sau un audit de compatibilitate cu browserele. Prev izualizarea folosește stiluri demonstrative fixe. Grid păstrează numărul ales de coloane și la lățimi mici; adaugă interogări media dacă designul final cere un număr diferit de coloane.

Actualizat 7 octombrie 2026

Citează această pagină

Stil de citare

ToolOctopus. “Generator de layout CSS.” Actualizat 7 octombrie 2026. https://tooloctopus.com/ro/generator-de-layout-css.

Adaugă data accesării dacă instrucțiunile tale de citare o cer.

Citările sunt formatate cu citeproc-js, creat de Frank Bennett, și cu stiluri Citation Style Language. Licență și cod sursă.