Informatică Dezvoltare web
Grid CSS explicat
Grid CSS este un sistem de layout bidimensional care permite crearea de grile cu rânduri și coloane pentru a aranja elementele într-o pagină web. Spre deosebire de Flexbox, Grid gestionează atât orizontalul, cât și verticalul simultan, oferind control precis asupra poziționării. Este potrivit pentru structuri complexe precum dashboard-uri sau layout-uri de articole.
Proprietăți cheie pentru Grid
- display: grid Definește un container Grid. Exemplu: div { display: grid; }.
- grid-template-columns și grid-template-rows Specifică dimensiunile coloanelor și rândurilor. Exemplu: grid-template-columns: 100px 200px;.
- grid-gap Adaugă spațiu între elementele grilei. Exemplu: grid-gap: 10px;.
- grid-area Atribuie un element unei zone specifică în grilă, definită cu grid-template-areas.
Cum să creezi o grilă simplă
- 1 Pasul 1: Structura HTML <div class="grid-container"> <div class="item1">Header</div> <div class="item2">Sidebar</div> <div class="item3">Content</div> </div>
- 2 Pasul 2: Configurarea CSS Grid .grid-container { display: grid; grid-template-columns: 150px auto; grid-template-rows: 80px auto; grid-gap: 5px; }
- 3 Pasul 3: Poziționarea elementelor .item1 { grid-column: 1 / 3; } /* ocupă două coloane */ .item2 { grid-row: 2; } /* sidebar */ .item3 { grid-column: 2; grid-row: 2; } /* content */
Utilizează Grid pentru layout-uri complexe; începe cu grile simple și experimentează cu unități precum fr sau auto.