Vizuális rácsszerkesztő

A Vizuális rácsszerkesztő (angolul Visual Grid Builder) lehetővé teszi, hogy a rácselrendezéseket vizuálisan tervezd és kezeld. Minden olyan elemnél elérhető, amelynek Megjelenítés értéke grid. Segítségével:

• Rácsméret: módosítod az oszlopok és sorok számát;
• Elemek áthelyezése és átméretezése: egyszerű fogd és vidd módszerrel állítod az elemek méretét és helyét a rácson belül;
• Lekérdezési ciklus: a rácson belüli lekérdezési ciklus elemeit is finomhangolhatod;
• Töréspontok: a különböző töréspontokhoz külön rácselrendezést készíthetsz;
• Elemek átnevezése: az elemek átnevezésével áttekinthetőbbé teheted az elrendezést;
• Elemek szerkesztése: egy rácselem fölé víve a ceruza ikonra kattintva az elempanelben folytathatod a szerkesztését;
• Visszaállítás: az egész rácsot vagy egyes elemeket is alaphelyzetbe állíthatod az aktuális töréspontra;
• Előzmények: a lépések között előre-hátra mozoghatsz;
• Rács kitöltése: egy kattintással Blokk elemekkel töltheted ki az üres rácscellákat;
• Azonosító- és osztályszint: az elrendezést az elem azonosítójának vagy egy osztálynak a szintjén is megtervezheted.

Megnyitás

1. Jelölj ki egy elrendezéselemet, például egy Divet.
2. A Tartalom lapon állítsd a Megjelenítés értékét grid-re.
3. A Megjelenítés érték mellett megjelenik a rácsszerkesztő ikonja. Kattints rá.

https://minta-bolt.hu/racs-teszt/?bricks=run

A képen a Megjelenítés mezőben a grid érték és mellette a rácsszerkesztő ikonja látszik, alatta a rácsos vezérlők (Rácssablon oszlopai, Rácssablon sorai stb.).

https://minta-bolt.hu/racs-teszt/?bricks=run

A képen az ablak két oszloppal és két sorral látszik: felül a vezérlősáv, alatta a rács oszlop- és sorméret-címkékkel, a cellákban pedig a Blokk elemek sorszámmal (0-tól).

Elemek stílusozása

A rácsszerkesztő az egyes elemeket és a lekérdezési ciklusban lévő elemeket is stílusozza. A mentés módja attól függ, hogy azonosító- vagy osztályszinten dolgozol.

Statikus elemek:

• Azonosítószint: ha átméretezel vagy áthelyezel egy statikus elemet, a változások a Rácselem vezérlők Rácsoszlop és Rácssor tulajdonságaiba kerülnek. Ez közvetlenül módosítja az elem rácspozícióját.
• Osztályszint: ha a rácsot osztályszinten állítod be, az átméretezés és az áthelyezés egyéni CSS-ként mentődik. Ezek a stílusok a fő elem Egyéni CSS vezérlőjébe kerülnek.

Lekérdezési ciklus elemei:

• Azonosító- és osztályszinten egyaránt az áthelyezés és az átméretezés egyéni CSS-ként mentődik a fő elem Egyéni CSS vezérlőjében.

Fontos: ne módosítsd az automatikusan generált CSS-stílusokat, mert az elrendezés épségéhez szükségesek. A kódkommentek egyértelműen jelölik őket, így könnyen felismerhetők és megőrizhetők. Áthelyezés vagy átméretezés után a CSS magától frissül az új értékekre. Ha alaphelyzetbe állítasz egy elemet, a generált egyéni CSS törlődik, és az elem visszatér az eredeti állapotába.

Vezérlők

Rácsműveletek (az ablak fejlécében)

1. Alaphelyzet (rács): az aktuális töréspont összes rácsstílusát visszaállítja.
2. Töréspontok: a szerkesztő elhagyása nélkül válthatsz a töréspontok között.
3. Előzmények: visszavonás és újra.

Rácsvezérlők (a vezérlősávban)

Vezérlő	Mit csinál
Oszlopok	Az oszlopok számát állítja (+ és - gombbal vagy beírással)
Sorok	A sorok számát állítja
Térköz	A rácselemek közti hézag, bármilyen érvényes CSS-értékkel, változókkal is
Min/max használata	Bekapcsolva az oszlop- vagy sorméretet minmax(0, 1fr) értékre állítja a nagyobb rugalmasságért

A rácsszerkesztő megnyitáskor magától felismeri a meglévő rácsbeállítást, és ehhez igazítja az oszlop- és sorvezérlőket.

Rácspanel vezérlői

• Egyes oszlopok és sorok: az oszlopok és sorok méretét egyenként szabályozod (a rács fölötti és melletti címkék).
• Elemek: a rácson belüli elemek szerkesztése.

A méreteket a Bricks a fő elem beállításaiból számolja ki. A repeat(3, 2fr) például 2fr 2fr 2fr formára alakul. A méreteket átírhatod 1fr, 300px, minmax(0, 1fr) vagy bármilyen más érvényes értékre.

Egyes elemek vezérlői

1. Átméretezés: húzd a szegélyeket.
2. Mozgatás: húzd az elemet a rácson belül.
3. Átnevezés: kattints az elem címkéjére.
4. Alaphelyzet: az elem összes stílusát visszaállítja az aktuális töréspontra.
5. Szerkesztés: bezárja a rácsszerkesztőt, és a szerkezet panelben kijelöli az elemet a további szerkesztéshez.

Minden elem sorszáma látható. Ha az elem lekérdezési ciklus része, a ciklusban elfoglalt saját sorszáma jelenik meg, 0-tól kezdve.

A rácsok általános működéséről a CSS Grid elrendezés fejezetben olvashatsz.