Teren de joacă CSS Grid

Toate instrumentele

Compune vizual șabloane CSS Grid, spații și poziționare, apoi copiază CSS-ul aspectului.

Previzualizare

Apasă pe un element numerotat din grilă pentru a-l selecta și repoziționa.

grid-template-columns —
grid-template-rows —
CSS generat
—
—
Coloane
Rânduri
Spații
16px
16px
Aliniere
Elemente din grilă
Element 1
Presetări

Despre Teren de joacă CSS Grid

CSS Grid Playground compune vizual layout-uri grid reale. Adaugă și elimină track-uri de coloane și rânduri pentru a defini grid-template-columns și grid-template-rows, setează spațiile dintre coloane și rânduri și ajustează toate cele patru proprietăți de aliniere — justify-items, align-items, justify-content și align-content — în timp ce previzualizarea reflectă instant fiecare modificare.

Plasarea elementelor este ceea ce face grid-urile puternice: adaugă elemente, dă click pe unul în previzualizare pentru a-l selecta și poziționează-l cu column start, column span, row start și row span. Așa se construiesc sidebar-uri, anteturi și celule de conținut care se întind pe mai multe track-uri — tehnica din spatele aproape oricărui layout grid real.

Trei presetări — holy grail, dashboard și gallery — încarcă structuri clasice de pagină pe care le poți disecă și adapta. Când layout-ul e cel dorit, copiază CSS-ul generat, care conține regulile complete ale containerului grid și plasarea fiecărui element.

Cum să utilizați Teren de joacă CSS Grid

  1. Adaugă sau elimină track-uri de coloane și rânduri pentru a defini template-ul grid-ului.
  2. Setează spațiul dintre coloane și cel dintre rânduri.
  3. Ajustează comenzile de aliniere: justify-items, align-items, justify-content și align-content.
  4. Adaugă elemente, dă click pe unul în previzualizare și setează-i start-ul și span-ul de coloană/rând pentru a-l poziționa.
  5. Încarcă presetarea holy grail, dashboard sau gallery pentru a studia un layout clasic.
  6. Copiază CSS-ul generat în foaia ta de stiluri.

Întrebări frecvente

justify-items aliniază fiecare element în interiorul propriei celule grid; justify-content aliniază întregul grid în interiorul containerului atunci când track-urile nu îl umplu complet. Aceeași distincție se aplică pe verticală cu align-items versus align-content.

Selectează elementul și mărește-i column span-ul — CSS-ul generat folosește grid-column cu o valoare span. Combinat cu un row span, poți construi bare de antet, sidebar-uri și celule mari de conținut în același grid.

Scheletul clasic de pagină: antet și subsol pe toată lățimea, cu trei coloane între ele — navigare, conținut principal și o zonă laterală (aside). Era notoriu de dificil cu float-uri; presetarea arată cum câteva plasări grid rezolvă totul curat.

Grid excelează la layout-uri bidimensionale unde rândurile și coloanele trebuie să se alinieze — schelete de pagină, dashboard-uri, galerii. Flexbox e cel mai bun pentru fluxuri unidimensionale precum bare de instrumente și meniuri. Se combină bine: grid pentru pagină, flex în interiorul componentelor.

Da, este gratuit și rulează în browser — experimentează cât vrei, iar nimic din ce construiești nu părăsește calculatorul tău.
Distribuiți
Instrumente conexe
Constructor de semnătură e-mail Proiectează o semnătură HTML profesională de e-mail din 30 de șabloane, personalizez și salveaz-o. Gratuit
Icoană în PNG Convertește Bootstrap Icons, Font Awesome și altele în imagini PNG personalizate — gratuit, în browserul tău. Gratuit
Generator de icoane pentru aplicații Generează un set complet de icoane pentru App Store și Google Play — fundaluri premium cu gradient, mesh și model, construit din logo-ul tău. Gratuit
Generator de favicon Construiește un pachet complet de favicon-uri dintr-un logo, o icoană de tip font sau un monogram — favicon.ico, PNG-uri moderne, icoana Apple touch, icoane PWA, un manifest web și fragmentul HTML. Gratuit
Generator CSS Box Shadow Creează umbre CSS stratificate cu glisoare live pentru offset, estompare, extindere, culoare, opacitate și inset — previzualizează pe un element real și copiază CSS-ul gata de lipit instant. Gratuit
Generator CSS Border Radius Creează vizual border-radius CSS cu previzualizare în timp real și copiază cod gata de producție. Gratuit
Căutări populare
generator css grid teren de joacă css grid generator grid-template-columns generator aspect css grid constructor grid-template-areas instrument css grid gap vizualizator css grid
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.