CSS Grid Ghid Rapid — Complete Guide

In this tutorial, you'll learn about CSS Grid Ghid Rapid. We cover key concepts, practical examples, and best practices.

Vei învăța cum să folosești CSS Grid pentru a crea layout-uri bidimensionale cu rânduri și coloane, controlând exact poziționarea și dimensiunea fiecărui element.

Problema

Layout-urile complexe cu mai multe rânduri și coloane sunt greu de realizat cu Flexbox sau cu metode tradiționale. CSS Grid permite definirea simultană a rândurilor și coloanelor, oferind control precis asupra plasării elementelor într-o grilă bidimensională.

Rezolvare rapidă

Pasul 1: Definește grila pe container

/* Greșit — layout cu float-uri multiple */
.container {
    float: left;
    width: 33.33%;
}

/* Corect */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

Rezultat: Trei coloane egale cu spațiu de 20px între ele.

Pasul 2: Folosește grid-template-columns și grid-template-rows

.container {
    display: grid;
    /* Greșit — coloane cu lățimi fixe care nu se adaptează */
    grid-template-columns: 200px 200px 200px;
    /* Corect — coloane responsive */
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto 200px auto;
    gap: 15px;
}

Rezultat: Prima coloană ocupă dublu față de celelalte, iar rândurile au dimensiuni mixte.

Pasul 3: Plasează elemente cu grid-column și grid-row

.header {
    /* Greșit — elementul se așază automat */
    /* Corect — ocupă toată lățimea */
    grid-column: 1 / -1;
}

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

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

Rezultat: Header-ul se întinde pe toate coloanele, sidebar-ul pe două rânduri, iar conținutul ocupă restul.

Pasul 4: Folosește grid-area pentru layout-uri complexe

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    gap: 10px;
    height: 100vh;
}

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

Rezultat: Un layout tipic de pagină web cu header, sidebar, conținut principal, aside și footer.

Prevenire

• Folosește grid-template-areas pentru layout-uri vizuale ușor de citit
• Utilizează unitatea fr în loc de procente pentru coloane flexibile
• Setează gap pentru spațiere, nu margini individuale
• Verifică layout-ul în DevTools — tab-ul Grid arată liniile și zonele

Greșeli comune

1. Confundarea grid-template cu grid-auto — grid-template definește coloane/rânduri explicite; grid-auto controlează elementele care nu încap în grila definită.
2. Omisiunea lățimii implicite — Implicit, elementele de grid au auto ca lățime, ceea ce poate duce la layout-uri neașteptate.
3. Folosirea fr pe același rând cu px fără înțelegerea calculului — fr distribuie spațiul rămas după ce coloanele fixe sunt calculate.
4. Uitarea lui grid-column: 1 / -1 pentru elemente full-width — Fără asta, elementele nu se întind pe toată lățimea.
5. Amestecarea grid-area cu grid-column/row în același layout — Alege o metodă și menține consecvența.

Exercițiu

Creează un layout de dashboard cu un header, sidebar, 3 carduri de statistici și un footer. Folosește grid-template-areas pentru a defini structura. Asigură-te că sidebar-ul se întinde pe toată înălțimea.

Întrebări frecvente

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.