Generator Grid CSS — Construirea Layout-urilor Bidimensionale

CSS Grid este cel mai puternic instrument de layout în CSS. Generatorul nostru îți permite să definești vizual coloanele, rândurile și gutter-ul și generează cod Grid gata de utilizat.

Conceptele Grid

grid-template-columns definește lățimile coloanelor. grid-template-rows definește înălțimile rândurilor. gap (sau grid-gap) setează spațiul dintre celule. fr (unitate fracțiune) distribuie proporțional spațiul disponibil.

Grid Responsive cu auto-fill

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) creează un grid responsive fără media queries. Coloanele se adaptează automat la lățimea disponibilă. Dimensiunea minimă (250px) previne coloanele prea înguste pe mobil.

Plasarea Grid

grid-column: 1 / 3 face un element să ocupe două coloane. grid-area dă un nume unui element pentru plasare. grid-template-areas îți permite să descrii un layout vizual în text. Puternic pentru layout-uri de pagini complexe.