CSS Grid: A Kétdimenziós Rácsrendszer

Az előző leckében megismertük a Flexboxot, ami zseniális, ha elemeket akarunk egy sorba vagy egy oszlopba rendezni. De mi van akkor, ha egy komplex weboldal-elrendezést (layoutot) akarunk építeni, ahol egyszerre kell kezelnünk a sorokat és az oszlopokat? Erre született meg a CSS Grid Layout.

Flexbox vs. Grid: Mi a különbség?

A legfontosabb szabály, amit meg kell jegyezned:

• A Flexbox egydimenziós. Vagy sorokban, vagy oszlopokban gondolkodik.
• A Grid kétdimenziós. Egyszerre kezeli a sorokat és az oszlopokat, így tökéletes a teljes weboldal vázának felépítésére.

A Grid Konténer aktiválása

Hasonlóan a Flexboxhoz, itt is a szülő elemen kell kezdenünk a munkát a display: grid; kiadásával.

<div class="grid-kontener">
    <div class="cella">Fejléc</div>
    <div class="cella">Tartalom</div>
    <div class="cella">Oldalsáv</div>
    <div class="cella">Lábléc</div>
</div>

Oszlopok és Sorok definiálása

Miután aktiváltuk a Gridet, meg kell mondanunk a böngészőnek, hogy hány oszlopot és hány sort szeretnénk, és azok milyen szélesek/magasak legyenek.

.grid-kontener {
    display: grid;
    /* Létrehozunk 3 oszlopot: az első 200px, a második 500px, a harmadik 200px széles */
    grid-template-columns: 200px 500px 200px;
    
    /* Létrehozunk 2 sort: az első 100px, a második 300px magas */
    grid-template-rows: 100px 300px;
    
    /* 20 pixel üres helyet (rést) hagyunk a cellák között */
    gap: 20px; 
}

A "fr" (Fraction) mértékegység: A Grid szuperképessége

A pixelekkel való számolás merev és nem reszponzív. A CSS Grid bevezetett egy új mértékegységet, az fr-t (fraction, azaz töredék). Ez a rendelkezésre álló szabad hely arányos elosztását jelenti.

.grid-kontener {
    display: grid;
    /* Létrehoz 3 oszlopot. Mindegyik pontosan 1/3-ad (egy egyenlő töredék) helyet kap. */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

Ha azt írod, hogy grid-template-columns: 1fr 2fr 1fr;, akkor a középső oszlop kétszer olyan széles lesz, mint a két szélső. Ez a reszponzív dizájn alapja!

A repeat() függvény

Ha 12 egyenlő oszlopot akarsz létrehozni, nem kell 12-szer leírnod, hogy 1fr. Használhatod a repeat() függvényt:

.grid-kontener {
    display: grid;
    /* Létrehoz 4 darab, egyenlő szélességű oszlopot */
    grid-template-columns: repeat(4, 1fr);
}

Elemek elhelyezése a rácson

A Grid igazi ereje az, hogy a HTML sorrendtől függetlenül bármelyik elemet bárhova teheted a rácson, és megmondhatod neki, hogy hány oszlopot vagy sort foglaljon el.

.fejlec-cella {
    /* A fejléc az 1. oszlopvonaltól indul, és a 4. oszlopvonalig tart (átível 3 oszlopot) */
    grid-column: 1 / 4;
}