🎨 Tutorial CSS Grid

Pentru a crea un grid, setezi display: grid pe container:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 10px;
}

Poți defini coloane și rânduri folosind diferite unități:

/* Unități fixe și flexibile */
.grid {
    grid-template-columns: 200px 1fr 2fr;
    grid-template-rows: 100px auto;
}

Controlează spațiul dintre elemente:

.grid {
    gap: 20px; /* sau */
    row-gap: 10px;
    column-gap: 20px;
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
        "header header header"
        "sidebar content aside"
        "footer footer footer";
    gap: 20px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

Poți poziționa elementele folosind liniile grid-ului:

.item {
    grid-column: 1 / 3; /* de la linia 1 la 3 */
    grid-row: 2 / 4;    /* de la linia 2 la 4 */
    /* sau */
    grid-column: span 2; /* ocupă 2 coloane */
}

Creează un layout tip masonry folosind Grid:

.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 20px;
    gap: 20px;
}

.masonry-item:nth-child(odd) {
    grid-row-end: span 10;
}

.masonry-item:nth-child(even) {
    grid-row-end: span 15;
}

Creează layout-uri asimetrice interesante:

.complex-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 80px;
    gap: 15px;
}

.featured { grid-column: span 3; grid-row: span 2; }
.vertical { grid-row: span 3; }
.horizontal { grid-column: span 2; }

Controlează cum se plasează automat elementele:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense; /* umple golurile automat */
}

Controlează alinierea în grid:

.grid {
    display: grid;
    justify-items: center; /* orizontal */
    align-items: center;   /* vertical */
    justify-content: space-between; /* container */
    align-content: center;  /* container */
}

Permite elementelor copil să moștenească grid-ul părintelui:

.parent {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.child {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 3;
}

Folosește container queries pentru layout-uri cu adevărat responsive:

.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 700px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.square-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.square-item {
    aspect-ratio: 1; /* Păstrează items pătrate */
    background: linear-gradient(135deg, #667eea, #764ba2);
}

Sfaturi pentru Debugging

1. Folosește Grid Inspector: Firefox și Chrome au tool-uri excelente
2. Outline pentru vizualizare:

   * { outline: 1px solid red; } /* Vezi toate elementele */
   .grid > * { outline: 2px solid blue; } /* Vezi grid items */

3. Numbering pentru debugging:

   .grid > *::before {
       content: counter(item);
       counter-increment: item;
   }

Optimizare Performance

• Evită grid-uri excesiv de complexe (sute de celule)
• Folosește will-change: transform pentru animații
• Preferă transform în loc de schimbarea layout-ului pentru animații
• Folosește contain: layout pentru izolare

/* === CONTAINER PROPERTIES === */
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 50px;
grid-template-areas: "header header header"
                     "sidebar main aside"
                     "footer footer footer";
gap: 20px; /* sau row-gap și column-gap */
grid-auto-columns: 100px;
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: row | column | dense;

/* Alignment */
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

/* === ITEM PROPERTIES === */
grid-column: 1 / 3; /* sau grid-column-start + grid-column-end */
grid-row: 2 / 4;    /* sau grid-row-start + grid-row-end */
grid-area: header;  /* sau row-start / col-start / row-end / col-end */

/* Self alignment */
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;

/* === FUNCȚII UTILE === */
repeat(3, 1fr)
repeat(auto-fit, minmax(200px, 1fr))
repeat(auto-fill, 100px)
minmax(100px, 1fr)
fit-content(300px)

/* === UNITĂȚI === */
fr - fraction unit
min-content - dimensiune minimă
max-content - dimensiune maximă
auto - dimensiune automată

Link-uri Utile

• MDN Web Docs: Documentație completă CSS Grid
• CSS Grid Garden: Joc interactiv pentru învățat Grid
• Grid by Example: Colecție de exemple practice
• CSS Tricks Grid Guide: Ghid complet ilustrat
• Can I Use: Verifică suportul browser

Tool-uri Recomandate

• CSS Grid Generator: Generează cod Grid vizual
• Griddy: Extension Chrome pentru debugging
• Firefox Grid Inspector: Cel mai bun tool pentru vizualizare

Felicitări! 🎉

Acum ești pregătit să creezi layout-uri complexe cu CSS Grid!

Continuă să exersezi și experimentează cu diferite combinații.