Generator CSS Grid

Exemple de layout CSS Grid

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Trei coloane egale Cel mai folosit layout pentru carduri.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

Galerie responsivă Câte coloane încap, fiecare de cel puțin 70px; fără media queries.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}

Bară laterală + conținut O coloană fixă și una care ocupă restul spațiului.

.container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-auto-rows: 110px;
  gap: 8px;
}

Tablă 4 × 4 Rânduri și coloane egale, cu spațiu mic între celule.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
}

Conținut centrat în celule Fiecare element stă în mijlocul celulei lui.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 80px);
  gap: 8px;
  justify-items: center;
  align-items: center;
}

Douăsprezece coloane Grila clasică pe 12 coloane, de unde se construiesc layout-uri de pagină.

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

Cum folosești generatorul de CSS Grid

Alege modul: număr fix de coloane, responsiv (câte coloane încap) sau lateral + conținut.
Setează lățimea coloanelor, înălțimea rândurilor și spațiul dintre ele.
Aliniază conținutul în celule cu justify-items și align-items.

Unitatea fr

1fr înseamnă „o parte din spațiul rămas”. repeat(3, 1fr) face trei coloane egale; 2fr 1fr face prima coloană de două ori mai lată decât a doua.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

Galerie responsivă fără media queries

Cu auto-fill și minmax(), browserul pune câte coloane încap, fiecare de cel puțin lățimea minimă. Pe telefon rămâne o coloană, pe monitor apar mai multe.

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

auto-fit funcționează la fel, dar când sunt puține elemente le întinde pe toată lățimea; auto-fill păstrează coloanele goale.

Întrebări frecvente

Ce diferență e între 1fr și minmax(0, 1fr)?

1fr are minimul auto, deci o coloană nu se micșorează sub conținutul ei (de exemplu un cuvânt foarte lung sau un bloc de cod). minmax(0, 1fr) le lasă să se micșoreze, ca toate coloanele să rămână egale.

Ce face grid-auto-rows?

Stabilește înălțimea rândurilor create automat, când elementele nu încap în rândurile definite cu grid-template-rows.