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.

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.