CSS Grid
A CSS Grid egy erőteljes elrendezési rendszer, amely lehetővé teszi, hogy kétdimenziós rácsokkal dolgozzunk, így sokkal pontosabban és rugalmasabban rendezhetjük el az elemeket.
A Grid alapjai
A Grid lehetővé teszi, hogy oszlopokat és sorokat hozzunk létre, és az elemeket ezekbe a cellákba helyezzük. Az alapvető beállításokat a grid-template-columns, grid-template-rows és gap tulajdonságokkal adhatjuk meg.
| Tulajdonság | Leírás |
|---|---|
| display: grid | Bekapcsolja a Grid elrendezést a kijelölt elemre. |
| grid-template-columns | Az oszlopok számát és méretét határozza meg. |
| grid-template-rows | A sorok számát és méretét határozza meg. |
| gap | Meghatározza az oszlopok és sorok közötti távolságot. |
Gyakorlati példa
Az alábbi példában egy három oszlopból álló gridet hozunk létre, ahol az elemek automatikusan igazodnak a cellákhoz.
A grid-template-columns: 1fr 1fr 1fr beállítással három egyenlő oszlopot hozunk létre, a gap segítségével pedig távolságot adunk az elemek közé.
Grid area-k és elnevezett területek
A grid-template-areas tulajdonság segítségével neveket adhatunk a rács egyes területeinek. Ez olvashatóbbá és karbantarthatóbbá teszi az elrendezést.
Az alábbi példában a fejléc, fő tartalom és lábléc külön grid area-ként van definiálva.
Reszponzív grid repeat() és auto-fit/auto-fill használatával
A repeat(), auto-fit és auto-fill kombinációja dinamikusan tölti ki a rendelkezésre álló helyet, így a grid automatikusan alkalmazkodik a képernyőmérethez.
Az alábbi példában a grid oszlopai automatikusan igazodnak a képernyő méretéhez.
Tippek a Grid használatához
A Grid nagy előnye, hogy komplex elrendezéseket is egyszerűen kezelhetünk. A sorok és oszlopok mérete dinamikusan változhat, így reszponzív elrendezések készítésére is kiváló.
- Használj fr (fractional unit) egységet az oszlopok és sorok rugalmas méretezéséhez.
- A grid-template-areas segítségével olvashatóbbá és karbantarthatóbbá teheted a kódot.
- A Grid és a Flexbox kombinációja még rugalmasabb és kreatívabb elrendezéseket biztosít.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
