CSS Grid Layoutok
A CSS Grid Layout lehetővé teszi teljes oldalelrendezések létrehozását, ahol fejlécek, oldalsávok, fő tartalmak és láblécek könnyen kombinálhatók. A grid-template-areas használatával az elrendezés átlátható és rugalmas.
Oldalelrendezés Grid segítségével
Az alábbi példában egy három részes elrendezést készítünk: fejléc, oldalsáv, fő tartalom és lábléc. A grid-template-areas segítségével egyszerűen meghatározhatjuk az elrendezés logikáját.
Ebben a példában a fejléc és lábléc teljes szélességet kap, míg az oldalsáv és fő tartalom két oszlopra oszlik. Ez egy klasszikus oldalelrendezés mintája.
További layout példák
A Grid rendkívül rugalmas, és különböző típusú elrendezéseket készíthetünk vele, például blog struktúrákat, adminisztrációs felületeket vagy média galériákat.
Blog Layout
Egy blog layoutban a fő tartalom és a cikkek mellett oldalsávban elhelyezhetünk kategóriákat és linkeket.
Dashboard Layout
Egy dashboard layoutban grafikonokat, statisztikákat és kártyákat helyezhetünk el, amelyek grid segítségével tisztán strukturáltak.
Tippek Grid Layoutokhoz
A Grid Layoutokat könnyen testreszabhatjuk és reszponzívvá tehetjük. Az egyszerű szabályok lehetővé teszik, hogy bármilyen eszközön jól mutasson az oldal.
- Használj grid-template-areas-t, hogy vizuálisan is áttekinthető legyen az elrendezés.
- Kombináld a Gridet media query-kkel a teljes reszponzivitás érdekében.
- A grid gap segítségével tiszta és szellős elrendezést hozhatsz létre.
✨ 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.
