CSS Grid elrendezés

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.