Generator CSS Grid
Previzualizare în timp real
De ce să folosiți un generator vizual CSS Grid?
CSS Grid este cel mai puternic sistem de layout din CSS, dar sintaxa are o curbă de învățare abruptă. Cu generatorul nostru vizual puteți ajusta grila cu glisoare și meniuri derulante și vedea efectul fiecărei proprietăți imediat.
Previzualizare grilă în timp real
Grila se actualizează în timp real când ajustați coloane, rânduri, spațiere și aliniere
Suport unitate fr
Șabloanele folosesc unitatea fr (fracțiune) pentru grile flexibile care se adaptează la dimensiunea containerului
CSS gata de utilizare
Exportați un bloc .container CSS curat cu grid-template-columns, rows, gap și align-items
Creați un layout CSS Grid
Configurați coloane și rânduri
Setați numărul de coloane și rânduri ale grilei cu glisorele
Selectați șablonul și spațierea
Alegeți șablonul de coloane (egal, fix+flexibil sau minmax responsive) și ajustați spațierea
Copiați CSS-ul
Faceți clic pe 'Copiați CSS' pentru a obține un bloc CSS complet gata de lipit în foaia dvs. de stiluri
Cazuri de utilizare CSS Grid
Layout pagină
Creați structura antet/panou lateral/conținut principal/subsol cu zone numite de grilă
Dashboard
Creați layout-uri complexe de dashboard cu carduri de dimensiuni variate folosind grid-column și grid-row span
Galerie
Creați galerii asemănătoare unei zidărie sau regulate care se adaptează cu auto-fill și minmax
Layout revistă
Creați layout-uri editoriale cu coloane inegale și conținut care se întinde pe mai multe celule
Cele mai bune practici pentru CSS Grid
✓ Preferați unitatea fr față de procente
Unitatea fr (fracțiune) distribuie spațiul disponibil după coloanele fixe fără calcul manual.
✓ Folosiți minmax() pentru grile responsive
repeat(auto-fill, minmax(250px, 1fr)) creează o grilă responsivă care ajustează automat numărul de coloane.
✓ Folosiți zone de grilă numite
grid-template-areas cu celule numite face layout-urile de pagini lizibile și ușor de modificat.
✓ Înțelegeți auto-fill vs. auto-fit
auto-fill creează numărul maxim de piste (inclusiv goale). auto-fit colapsează pistele goale și le extinde pe cele existente — de obicei optim pentru grile de carduri.
❓ Întrebări frecvente
Ce este unitatea fr în CSS Grid?
fr înseamnă 'unitate fracțiune'. 1fr reprezintă o porțiune din spațiul liber disponibil în containerul grilei. repeat(3, 1fr) creează 3 coloane care împart spațiul disponibil uniform.
Care este diferența dintre CSS Grid și Flexbox?
Flexbox este unidimensional — plasează elemente de-a lungul unei singure axe (rând sau coloană). CSS Grid este bidimensional — poate controla simultantana rânduri și coloane, mult mai puternic pentru layout-urile de pagini.
Ce face minmax()?
minmax(min, max) specifică un interval de dimensiuni pentru o pistă de grilă. minmax(200px, 1fr) înseamnă că coloana are cel puțin 200px lățime, dar poate crește pentru a umple spațiul disponibil.
Când să folosiți CSS Grid în loc de Flexbox?
Folosiți Grid pentru layout-uri bidimensionale unde controlați simultan rânduri și coloane. Folosiți Flexbox pentru layout-urile unidimensionale ale componentelor ca barele de navigare.