# Vizuális rácsszerkesztő

> CSS-rácsos elrendezések vizuális szerkesztése: oszlopok, sorok, hézag, elemek áthelyezése és átméretezése töréspontonként, lekérdezési ciklussal is.

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á.

![A Div elem tartalompanelje grid megjelenítéssel és a rácsszerkesztő ikonjával](./kepek/funkciok-vizualis-racsepito-megjelenites.webp)

*A Div elem tartalompanelje grid megjelenítéssel és a rácsszerkesztő ikonjával* (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.).
![A Vizuális rácsszerkesztő ablaka kétoszlopos, kétsoros rácssal](./kepek/funkciok-vizualis-racsepito.webp)

*A Vizuális rácsszerkesztő ablaka kétoszlopos, kétsoros rácssal* (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](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-css-grid/) fejezetben olvashatsz.