# CSS Grid elrendezés > Kétdimenziós elrendezések a Bricks-ben: rácskonténer, vizuális rácsépítő, oszlop- és sorsávok, implicit rács, auto-fit és elemek elhelyezése vonalszám szerint. A CSS Grid kétdimenziós elrendezéseket (oszlopok és sorok) tesz lehetővé. A CSS flexbox, amelyet a Bricks alapértelmezett elrendezési modellként használ, egydimenziós elrendezésekre való: vagy sor, vagy oszlop. ## Rácselrendezés létrehozása Bármely elrendezéselemet (szakasz, tároló, blokk, div) CSS-rácsos elrendezéssé alakíthatsz a **Megjelenítés** (Display) értékének `grid`-re állításával. Ez az elem a rácskonténer. A rácskonténer minden közvetlen gyermekeleme rácselem, amelyhez további **Rácsoszlop** és **Rácssor** beállítások tartoznak, hogy elhelyezd a rácson belül. Ha a szerkesztőben egy rácskonténert szerkesztesz, látható lesz egy rácsfedvény, amely a rácscellákat mutatja. Az elemműveletek közül a kis négyzetrácsos ikonra kattintva megjelenítheted vagy elrejtheted ezt a fedvényt. Alapból a rácselemek sorokban helyezkednek el, és kitöltik a rácskonténer teljes szélességét. Önmagában ez még nem használja ki a CSS Grid valódi erejét, amíg nem adsz meg oszlop- és sorsávokat. ## Visual Grid Builder (vizuális rácsépítő) Ha egy elrendezéselem **Megjelenítés** értéke `grid`, a Bricks hozzáad egy **Visual Grid Builder** műveletet a rácsvezérlőhöz. Nyisd meg, hogy oszlopokat, sorokat és hézagokat vizuálisan hozz létre és módosíts, ahelyett, hogy minden `grid-template-columns` vagy `grid-template-rows` értéket kézzel írnál. A Visual Grid Builder mutatja a rácspanelt, a sor- és oszlopvezérlőket, a töréspontvezérlőket, a visszavonás/újra előzményeket, valamint olyan műveleteket, mint a rács kitöltése vagy alaphelyzetbe állítása. Az oszlop-, sor- és hézagértékek visszakerülnek a rácsvezérlőkbe. A rácselemek elhelyezése, ahol lehetséges, a gyermekelemek rácsvezérlőibe mentődik. Lekérdezési ciklus elemeinél, aktív osztálystílusozásnál, nem beágyazható elemeknél vagy komponensgyökereknél a Bricks a generált elhelyezési CSS-t a kiválasztott rács egyedi CSS-ébe írja, a Visual Grid Builder jelölői között. ## Oszlop- és sorsávok beállítása (explicit rács) Ha elkészült a rácskonténer, meg kell határoznod az oszlop- és sorsávokat. Ezt explicit módon teheted meg a rácskonténer **Rácssablon oszlopai** (`grid-template-columns`) és **Rácssablon sorai** (`grid-template-rows`) beállításaival. Néhány példa: ### `grid-template-columns: 200px 1fr 2fr` A `grid-template-columns` minden értéke egy oszlopsávot hoz létre. A fenti példa háromoszlopos rácselrendezést ad: az 1. oszlop fix 200 px széles, a 2. oszlop `1fr`, a 3. `2fr` széles. Az `fr` új rugalmas egység, a törtegység, amely a rendelkezésre álló hely x részét foglalja el. Hogyan számolódik az `fr`? Tegyük fel, hogy a rácskonténer 1100 px széles (a tároló alapértelmezett szélessége). Először le kell vonni az összes nem `fr` értéket és a hézagokat: az 1. oszlop fix 200 px-je után 900 px marad. Összesen 3 törtegység van (1fr a 2. és 2fr a 3. oszlopból), így az 1fr 300 px (900 px / 3). A 2. oszlop 300 px, a 3. oszlop 600 px széles. ### `grid-template-rows: 100px 300px` A `grid-template-rows` minden értéke egy sorsávot hoz létre. A példa az első két sort definiálja explicit módon: az 1. sor 100 px, a 2. sor 300 px magas. Mivel csak az első két sor magasságát adtuk meg, a 2. sor utáni sorok magasságát alapból a tartalmuk határozza meg. Ezen az implicit rács létrehozásával lehet változtatni. ### Implicit rács A rácskonténer automatikusan további (oszlop- és sor-)sávokat hoz létre azoknak a rácselemeknek, amelyek az explicit módon definiált rácson kívülre esnek. Ezt hívjuk implicit rácsnak. Az implicit rács oszlop- és sormérete a rácskonténer **Automatikus rácsoszlopok** (`grid-auto-columns`) és **Automatikus rácssorok** (`grid-auto-rows`) beállításaival adható meg. ### Minimális és maximális sávméret A `minmax` CSS-függvény minimális és maximális sávméretet ad. Két argumentumot fogad: az első a sáv minimális, a második a maximális értéke. `grid-template-columns: repeat(3, minmax(200px, 1fr))` háromoszlopos explicit rácsot hoz létre, ahol minden rácselem legalább 200 px, legfeljebb 1fr széles. Az ilyen explicit rács gondja, hogy nem reszponzív: 600 px-nél keskenyebb nézetben túlcsordul (3 oszlop, egyenként legalább 200 px), és az oszlopok száma sem igazodik magától a különböző töréspontokhoz. ### auto-fill és auto-fit kulcsszavak Az `auto-fill` vagy `auto-fit` kulcsszóval megoldhatók ezek a reszponzivitási gondok, mert médialekérdezések nélkül hozhatsz létre reszponzív rácselrendezést. Explicit háromoszlopos rács helyett így használd: `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))` Hogy melyik kulcsszót használd, az a kívánt viselkedéstől függ: az `auto-fit` kitölti a rendelkezésre álló helyet a rácselemekkel, az `auto-fill` nem (megtartja a szabad helyet). ### Sávméretek ismétlése A `repeat` CSS-függvény tömör formában definiál ismétlődő sávméret-mintát. Két argumentuma: az első az ismétlések száma, a második a sávok definíciója. - `grid-template-columns: repeat(3, 1fr)` explicit háromoszlopos rácsot hoz létre. - `grid-template-rows: 100px repeat(2, 1fr) 200px` explicit négysoros rácsot hoz létre: az 1. sor 100 px, a 2. és a 3. sor `1fr`, a 4. sor 200 px magas. ## Rácselemek elhelyezése (vonalszám szerint) A rácsvonalak egy oszlop- vagy sorsáv kezdetét és végét jelölik. A számlálás 1-től kezdődik. Ezekkel a vonalszámokkal helyezhetsz el egy rácselemet a rácson. Egy háromoszlopos explicit rácsban, amelynek elemei három sort fednek le, négy oszlopvonal és négy sorvonal van. Ha a böngészőben (például Chrome-ban) megvizsgálsz egy rácselrendezést, az elem csomópontja mellett látható kis kék `grid` gombra kattintva a böngésző a rácsvonalakat is megmutatja. A rácselem elhelyezéséhez a **Rácsoszlop** (`grid-column`) és a **Rácssor** (`grid-row`) beállításokat használd. Ezek minden rácselemen (a rácskonténer közvetlen gyermekein) elérhetők. Szintaxis: az első érték a kezdővonal száma, utána perjel (`/`), majd a második érték, a végvonal száma. Ha például a Rácsoszlop `2 / 4`, az elem a 2. oszlopvonalnál kezdődik, és a 4.-nél végződik. Ha a Rácssor `1 / 3`, az 1. sorvonalnál kezdődik, és a 3.-nál végződik, vagyis két oszlopot és két sort foglal el. Ugyanezt elérheted a Rácsoszlop és a Rácssor `span 2` értékével is. A `span` kulcsszó megadja, hogy az elem hány oszlopot vagy sort fogjon át. ## Megjegyzések - A névvel ellátott rácsterületeket (`grid-template-areas`) egyedi CSS-ben kell megadni. - Lekérdezési ciklusban lévő rácselemek elhelyezését érdemes `nth-child` egyedi CSS-sel megoldani. - Ez a fejezet a CSS Grid áttekintése, nem teljes referencia. A CSS Grid mélyebb megismeréséhez érdemes külön CSS Grid útmutatókat is olvasni.