A CSS Grid Layout egy kétdimenziós elrendezési rendszer, amely lehetővé teszi komplex layoutok egyszerű megvalósítását. Ez az oldal bemutatja a Grid legfontosabb tulajdonságait és használatát.
A Grid layout létrehozásához először definiálnunk kell a grid konténert és annak oszlopait, sorait. Az alábbi példában különböző grid struktúrákat próbálhatsz ki.
A grid-gap tulajdonság segítségével beállíthatjuk a grid elemek közötti távolságot. Külön megadhatjuk a sorok (row-gap) és oszlopok (column-gap) közötti távolságot is.
A grid-template-areas segítségével elnevezett területekre oszthatjuk a grid-et. Ez különösen hasznos teljes weboldalak szerkezetének kialakításakor. Az alábbi példákban gyakori weboldal elrendezéseket láthatsz.
Az auto-fill és auto-fit értékek a repeat() függvénnyel használva különböző módon kezelik a rendelkezésre álló helyet. Próbáld ki az átméretezést mindkét esetben!