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.