CSS Grid: Ghid complet pentru layout-uri moderne

CSS Grid: Introducere

CSS Grid este un sistem de layout bidimensional care permite organizarea elementelor HTML în rânduri și coloane. Este ideal pentru structuri complexe, pagini responsive și layout-uri precise.

Activarea Grid-ului

Pentru a activa sistemul Grid, se aplică proprietatea display: grid pe un container. Alternativ, se poate folosi display: inline-grid pentru comportament inline. Toți copiii direcți ai acestui container devin automat grid items.

🔧 Exemplu: Activarea Grid-ului

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.grid {
  display: grid;
  background: #f0f0f0;
  padding: 10px;
}
.grid > div {
  background: #ccc;
  padding: 15px;
  text-align: center;
}

Terminologie de bază

Înainte de a construi un layout cu CSS Grid, e important să înțelegi termenii fundamentali:

Grid container - elementul care are display: grid. Este cadrul în care se construiește grid-ul.
Grid item - orice copil direct al containerului. Acestea sunt elementele care se poziționează în grid.
Track - o coloană sau un rând din grid.
Line - linia care separă două track-uri. Poate fi folosită pentru poziționare.
Area - o zonă rectangulară formată din mai multe celule, definită cu grid-area.

Definirea structurii

Structura grid-ului se stabilește prin definirea coloanelor și rândurilor. Se folosesc proprietățile grid-template-columns și grid-template-rows pentru a crea un cadru flexibil sau fix.

Unități fixe: px, % - dimensiuni exacte
Unități flexibile: fr - fracțiuni din spațiul disponibil
Funcții utile: repeat() - repetă valori; minmax() - definește limite flexibile

Exemplu:

grid-template-columns: repeat(3, 1fr);
grid-template-rows: minmax(100px, auto);

Acest cod creează 3 coloane egale și rânduri care au minim 100px și se pot extinde automat.

🔧 Exemplu live

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(100px, auto);
  gap: 10px;
  background: #eee;
  padding: 10px;
}
.grid > div {
  background: #ccc;
  padding: 20px;
  text-align: center;
  font-weight: bold;
}

Spațiere între elemente

CSS Grid oferă control precis asupra spațiului dintre coloane și rânduri prin intermediul proprietății gap. Aceasta poate fi aplicată global sau separat pe fiecare axă.

gap - definește spațiul dintre toate coloanele și rândurile
row-gap - definește spațiul doar între rânduri
column-gap - definește spațiul doar între coloane

Exemplu:

grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px;
gap: 20px;

Acest cod creează 3 coloane egale, un singur rând de 150px și un spațiu de 20px între toate celulele.

🔧 Exemplu: Spațiere între elemente

<div class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 150px;
  gap: 20px;
  background: #fafafa;
  padding: 10px;
}
.grid > div {
  background: #ddd;
  padding: 20px;
  text-align: center;
  font-size: 1.2em;
}

Alinierea elementelor

CSS Grid oferă control asupra aliniării atât la nivel de container, cât și la nivel de item. Aceste proprietăți ajută la distribuirea spațiului și la poziționarea elementelor în interiorul celulelor.

La nivel de container

justify-content - aliniere orizontală a grid-ului în container
align-content - aliniere verticală a grid-ului în container
place-content - shortcut pentru ambele

La nivel de item

justify-items - aliniere orizontală implicită a itemilor
align-items - aliniere verticală implicită a itemilor
justify-self - aliniere orizontală individuală
align-self - aliniere verticală individuală
place-self - shortcut pentru ambele

Exemplu:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

Toți itemii vor fi centrați pe ambele axe în interiorul celulelor.

🔧 Exemplu: Alinierea elementelor

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  height: 200px;
  background: #f9f9f9;
}
.grid > div {
  background: #bbb;
  padding: 20px;
  font-weight: bold;
}

Poziționare manuală

CSS Grid permite poziționarea precisă a elementelor în grid folosind linii de start și de final. Se pot folosi proprietăți individuale sau shorthand.

grid-column-start / grid-column-end - poziționează pe axa orizontală
grid-row-start / grid-row-end - poziționează pe axa verticală
grid-column / grid-row - shorthand pentru start / end
grid-area - shortcut complet: grid-row-start / grid-column-start / grid-row-end / grid-column-end

Exemplu:

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

Itemul va ocupa coloanele 2 și 3 și rândurile 1 și 2.

🔧 Exemplu: Poziționare manuală

<div class="grid">
  <div>1</div>
  <div class="item">2</div>
  <div>3</div>
  <div>4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  background: #f0f0f0;
}
.grid > div {
  background: #ccc;
  padding: 20px;
  text-align: center;
  font-weight: bold;
}
.item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background: #ffcc00;
}

Layout vizual cu zone

CSS Grid permite definirea unui layout semantic și ușor de întreținut folosind grid-template-areas. Fiecare zonă este denumită și atribuită unui item prin grid-area.

Exemplu de definire a zonelor:

grid-template-areas:
  "header header"
  "main sidebar"
  "footer footer";

Fiecare item din grid trebuie să aibă o zonă atribuită:

.header  { grid-area: header; }
.main    { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer  { grid-area: footer; }

🔧 Exemplu: Layout vizual cu zone

<div class="grid">
  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
  gap: 10px;
  height: 300px;
}
.header  { grid-area: header; background: #4CAF50; color: white; padding: 10px; }
.main    { grid-area: main; background: #f1f1f1; padding: 10px; }
.sidebar { grid-area: sidebar; background: #ddd; padding: 10px; }
.footer  { grid-area: footer; background: #333; color: white; padding: 10px; text-align: center; }

Umplere automată și layout flexibil

CSS Grid permite generarea automată de coloane sau rânduri în funcție de spațiul disponibil, folosind auto-fill și auto-fit. Acestea sunt utile în layout-uri responsive.

auto-fill - creează cât mai multe coloane, chiar dacă unele rămân goale
auto-fit - creează coloane care se ajustează la conținutul disponibil
minmax() - definește limitele minime și maxime ale dimensiunii unei coloane

Exemplu:

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Acest cod creează coloane care au minimum 150px și se extind până la o fracțiune egală din spațiul disponibil. Numărul de coloane se ajustează automat.

🔧 Exemplu: Umplere automată și layout flexibil

<div class="grid">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
  <div>Box 5</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  background: #f5f5f5;
  padding: 10px;
}
.grid > div {
  background: #cce5ff;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #99c;
}

Flux automat și dimensiuni implicite

CSS Grid poate genera automat rânduri sau coloane pentru elementele care nu au o poziție definită. Acest comportament este controlat prin proprietățile grid-auto-flow, grid-auto-rows și grid-auto-columns.

grid-auto-flow - stabilește direcția în care sunt plasate automat elementele: row, column sau dense
grid-auto-rows - definește înălțimea implicită a rândurilor generate automat
grid-auto-columns - definește lățimea implicită a coloanelor generate automat

Exemplu:

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 120px;
}

Acest cod creează coloane de 120px lățime, iar elementele sunt plasate automat pe coloane.

🔧 Exemplu: Flux automat și dimensiuni implicite

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 120px;
  gap: 10px;
  background: #f0f0f0;
  padding: 10px;
}
.grid > div {
  background: #ffd966;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #cc9900;
}

Grid pe elemente individuale

Fiecare element dintr-un grid poate fi poziționat manual folosind proprietăți CSS specifice. Acestea oferă control total asupra amplasării în rânduri și coloane.

grid-column-start / grid-column-end - definește poziția pe axa orizontală
grid-row-start / grid-row-end - definește poziția pe axa verticală
grid-area - scurtătură pentru toate cele patru proprietăți

Exemplu:

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

Acest cod plasează elementul între coloanele 2 și 4 și între rândurile 1 și 3.

🔧 Exemplu: Grid pe elemente individuale

<div class="grid">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  background: #f9f9f9;
  padding: 10px;
}
.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: #cce5ff;
}
.item2 {
  grid-column: 3 / 5;
  grid-row: 2 / 4;
  background: #d4edda;
}
.item3 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background: #f8d7da;
}
.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid #999;
}

Grid implicit vs. Grid explicit

În CSS Grid, putem defini structura în mod explicit sau putem lăsa browserul să o genereze automat (implicit).

Grid explicit - definit prin grid-template-rows și grid-template-columns
Grid implicit - generat automat pentru elementele care depășesc structura definită
grid-auto-rows și grid-auto-columns - controlează dimensiunile implicite

Exemplu:

.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 80px;
}

Aici sunt definite 2 coloane explicit, iar rândurile suplimentare sunt generate implicit cu înălțimea de 80px.

🔧 Exemplu: Grid implicit vs. Grid explicit

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 80px;
  gap: 10px;
  background: #f0f0f0;
  padding: 10px;
}
.grid > div {
  background: #e2e3e5;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #999;
}

Grid nesting și sub-grid

CSS Grid permite crearea de grile în interiorul altor grile. Acest lucru se numește nesting. Începând cu specificația CSS Subgrid, putem chiar să sincronizăm grilele interne cu cele externe.

Nesting - un element din grid devine container pentru un alt grid
Subgrid - permite moștenirea liniilor de grid de la containerul părinte
grid-template-columns: subgrid - activează comportamentul de subgrid

Subgrid este suportat doar în browsere moderne (Firefox, Safari, Chromium 117+).

🔧 Exemplu: Grid nesting și sub-grid

<div class="parent-grid">
  <div class="nested-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div>Alt element</div>
</div>

.parent-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  background: #f0f0f0;
  padding: 10px;
}
.nested-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  background: #d1ecf1;
  padding: 10px;
}
.nested-grid > div {
  background: #bee5eb;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #0c5460;
}
.parent-grid > div {
  border: 1px solid #999;
  padding: 10px;
}

Ordinea de afișare și layering în Grid

CSS Grid permite controlul asupra ordinii în care sunt afișate elementele și asupra stratificării lor (layering), folosind proprietăți precum order și z-index.

order - stabilește ordinea de afișare în grid (funcționează doar pe elemente display: grid sau flex)
z-index - controlează ce element apare deasupra altuia
position - trebuie să fie relative, absolute sau fixed pentru ca z-index să funcționeze

Exemplu:

.item {
  order: 2;
  position: relative;
  z-index: 10;
}

Acest cod mută elementul în a doua poziție și îl aduce deasupra altor elemente.

🔧 Exemplu: Ordinea de afișare și layering în Grid

<div class="grid">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
  background: #f8f9fa;
  padding: 10px;
}
.item1 {
  background: #ffc107;
  z-index: 1;
  position: relative;
}
.item2 {
  background: #17a2b8;
  z-index: 3;
  position: relative;
}
.item3 {
  background: #28a745;
  z-index: 2;
  position: relative;
}
.grid > div {
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #999;
}

Grid și media queries

CSS Grid funcționează excelent cu media queries, permițând adaptarea layout-ului în funcție de dimensiunea ecranului.

@media - permite definirea de stiluri condiționate
grid-template-columns - poate fi modificat pentru diferite rezoluții
repeat() și minmax() - utile pentru layout-uri fluide

Exemplu:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Acest cod afișează 4 coloane pe ecrane mari și doar 2 coloane pe ecrane mici.

🔧 Exemplu: Grid și media queries

<div class="grid">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
  <div>Box 5</div>
  <div>Box 6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.grid > div {
  background: #cce5ff;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #99c;
}
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Grid și fallback-uri pentru browsere vechi

Deși CSS Grid este suportat de majoritatea browserelor moderne, unele versiuni mai vechi nu îl recunosc. Pentru aceste cazuri, se pot folosi fallback-uri sau feature queries.

@supports - verifică dacă browserul suportă o proprietate CSS
display: flex - poate fi folosit ca alternativă simplă
Graceful degradation - oferă o versiune funcțională, dar mai simplă

Exemplu:

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

Acest cod aplică Grid doar dacă browserul îl suportă, altfel folosește Flexbox.

🔧 Exemplu: Grid și fallback-uri pentru browsere vechi

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: #e9ecef;
    padding: 10px;
  }
}
@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
    background: #f8d7da;
    padding: 10px;
  }
}
.container > div {
  background: #fff3cd;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #999;
  margin: 5px;
  flex: 1 0 30%;
}

Layout de pagină cu Grid

Un layout de pagină tipic conține:

Header - partea de sus
Sidebar - meniul lateral
Content - zona principală
Footer - partea de jos

Folosim grid-template-areas pentru a defini vizual structura.

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

🔧 Exemplu: Layout de pagină cu Grid

<div class="grid">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  height: 100vh;
  background: #f8f9fa;
  padding: 10px;
}
header {
  grid-area: header;
  background: #007bff;
  color: white;
  padding: 20px;
}
aside {
  grid-area: sidebar;
  background: #e9ecef;
  padding: 20px;
}
main {
  grid-area: content;
  background: #ffffff;
  padding: 20px;
}
footer {
  grid-area: footer;
  background: #343a40;
  color: white;
  padding: 20px;
  text-align: center;
}

Galerie de imagini responsive

Folosim grid-template-columns cu auto-fit și minmax() pentru a crea o galerie care se adaptează automat la dimensiunea ecranului.

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

Acest cod creează coloane care se extind automat, cu o lățime minimă de 150px.

🔧 Exemplu: Galerie de imagini responsive

<div class="gallery">
  <img src="imagini/baloane.jpg" alt="img1">
  <img src="imagini/baloane.jpg" alt="img2">
  <img src="imagini/baloane.jpg" alt="img3">
  <img src="imagini/baloane.jpg" alt="img4">
  <img src="imagini/baloane.jpg" alt="img5">
  <img src="imagini/baloane.jpg" alt="img6">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  background: #f8f9fa;
  padding: 10px;
}
.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

Dashboard cu carduri dinamice

Folosim grid-template-columns cu auto-fit și minmax() pentru a crea un layout flexibil, unde cardurile se rearanjează automat în funcție de spațiu.

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

Cardurile se vor extinde și reorganiza automat pe ecrane diferite.

🔧 Exemplu: Dashboard cu carduri dinamice

<div class="dashboard">
  <div class="card">📈 Vânzări</div>
  <div class="card">👥 Utilizatori</div>
  <div class="card">💬 Mesaje</div>
  <div class="card">⚙️ Setări</div>
  <div class="card">📦 Produse</div>
  <div class="card">📊 Statistica</div>
</div>

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  background: #f1f3f5;
  padding: 20px;
}
.card {
  background: white;
  border-radius: 8px;
  padding: 30px;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #dee2e6;
}

Proiect aplicat: Layout complet cu CSS Grid

Acest layout combină toate conceptele învățate: zone, umplere automată, aliniere, layering, media queries și fallback.

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "sidebar gallery"
    "sidebar dashboard"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 20px;
  padding: 20px;
}

🔧 Proiect aplicat: Layout complet și responsive

<div class="grid">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Content principal</main>
  <section class="gallery">
    <img src="imagini/baloane.jpg">
    <img src="imagini/baloane.jpg">
    <img src="imagini/baloane.jpg">
  </section>
  <section class="dashboard">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
  </section>
  <footer>Footer</footer>
</div>

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "sidebar gallery"
    "sidebar dashboard"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
}
header { grid-area: header; background: #007bff; color: white; padding: 20px; }
aside { grid-area: sidebar; background: #e9ecef; padding: 20px; }
main { grid-area: content; background: #ffffff; padding: 20px; }
.gallery {
  grid-area: gallery;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}
.gallery img {
  width: 100%;
  border-radius: 6px;
}
.dashboard {
  grid-area: dashboard;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-weight: bold;
  text-align: center;
}
footer { grid-area: footer; background: #343a40; color: white; padding: 20px; text-align: center; }

/* 🔧 Responsive layout */
@media (max-width: 768px) {
  .grid {
    grid-template-areas:
      "header"
      "sidebar"
      "content"
      "gallery"
      "dashboard"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

🛠️ Sfaturi utile pentru CSS Grid

✅ Folosește fr pentru layout-uri flexibile - distribuie spațiul proporțional
✅ Combină Grid cu Flexbox - Grid pentru structură, Flex pentru detalii
✅ Testează cu DevTools - vizualizează liniile de grid și zonele
✅ Folosește minmax() și auto-fit pentru layout-uri responsive
✅ Definește grid-template-areas pentru claritate și mentenanță ușoară
✅ Nu abuza de z-index - păstrează layering-ul simplu
✅ Folosește @supports pentru fallback-uri elegante

Aceste sfaturi te ajută să construiești layout-uri robuste, clare și adaptabile.

CSS Grid nu e doar un sistem de layout — e un limbaj vizual. Cu cât îl înțelegi mai bine, cu atât îți poți exprima ideile mai clar.

🧠 Quiz - CSS Grid

Felicitari! Acest curs introductiv se opreste aici. In urmatorul curs vei invata limbajul de programare Javascript. Mult succes si spor la invatat!

CSS Grid: Introducere

Activarea Grid-ului

Terminologie de bază

Definirea structurii

Spațiere între elemente

Alinierea elementelor

La nivel de container

La nivel de item

Poziționare manuală

Layout vizual cu zone

Umplere automată și layout flexibil

Flux automat și dimensiuni implicite

Grid pe elemente individuale

Grid implicit vs. Grid explicit

Grid nesting și sub-grid

Ordinea de afișare și layering în Grid

Grid și media queries

Grid și fallback-uri pentru browsere vechi

Layout de pagină cu Grid

Galerie de imagini responsive

Dashboard cu carduri dinamice

Proiect aplicat: Layout complet cu CSS Grid

🛠️ Sfaturi utile pentru CSS Grid

🧠 Quiz - CSS Grid

Politica Cookie-uri