CSS grid-gap

A <grid-gap>, valamint a <row-gap> és <column-gap> tulajdonságok a rácselrendezések közötti térköz szabályozására szolgálnak. Ezekkel könnyedén elválaszthatjuk az elemeket anélkül, hogy extra margókat használnánk.

Egységes térköz a grid-gap segítségével

A <grid-gap> tulajdonság rövidített forma, amely egyszerre állítja be a sorok és oszlopok közötti távolságot. Ez egy egyszerű módja annak, hogy egy rács rendezett és olvasható legyen.

Az alábbi példa bemutatja, hogyan hozhatunk létre két oszlopból álló rácsot, ahol a cellák között 20px térköz található.

Sor- és oszloptávolság külön szabályozása

A <row-gap> és a <column-gap> tulajdonságok lehetővé teszik, hogy a sorok és oszlopok közötti távolságokat külön-külön állítsuk be. Ez akkor hasznos, ha eltérő elrendezést szeretnénk elérni.

Ebben a példában a sorok közötti távolság 10px, míg az oszlopok közötti 30px.

Tippek a grid-gap használatához

A térközök beállítása javítja a weboldal vizuális struktúráját és felhasználói élményét. Íme néhány hasznos tanács:

• Használj <grid-gap>-et margók helyett, ha egységes rácselrendezésre van szükség.
• Mobil nézetnél érdemes kisebb gap értékeket alkalmazni, hogy jobban illeszkedjen a képernyőhöz.
• Kombináld a <row-gap> és <column-gap> beállításokat, ha eltérő sor- és oszloptávolságot szeretnél.