# Rács konténer készítése

> Lépésről lépésre egy rács konténer felépítése, beágyazott rács használata, és a rács beállításai.

A rács (Grid) konténer gyors módja annak, hogy oszlopokra és sorokra osztott elrendezést építs. A példában egy 4×4-es rácsot készítesz, ezért a te eredményed kicsit eltérhet, ha máshogy igazítod az elemeket.

## Rács létrehozása

1. Nyiss meg egy oldalt az Elementor szerkesztőben.
2. Kattints a vásznon a **+** jelre.
3. A **Melyik elrendezést szeretnéd használni?** kérdésnél válaszd a **Rács** lehetőséget.
4. Válaszd ki az egyik rácselrendezést (a példában 4×4-est).

Egy rácscellába csak egy elem kerülhet, de van egy trükk, amivel ezt megkerülheted (lásd lentebb). Ha szorosabb elrendezést szeretnél, a sorok magasságát csökkentsd.

## Elemek elhelyezése a cellákban

1. Húzz egy **Szövegszerkesztő** widgetet az első cellába, és írd bele például: „Egy rózsa bármilyen más néven”.
2. Húzz egy **Kép** widgetet a második cellába, és válassz hozzá képet. A rács automatikusan igazítja a cella méretét a képhez; a cella méretét a kép méretének módosításával változtathatod.
3. A harmadik cellába húzz egy újabb **Szövegszerkesztő** widgetet.

## Több elem egy cellában: beágyazott rács

A negyedik cellába két szöveget és két képet szeretnél tenni. Mivel egy cella csak egy elemet fogad, tegyél a cellába egy konténert, és ebbe kerüljenek a widgetek.

1. Húzz egy **konténer** elemet a 4. cellába.
2. A rendet megtartva legyen ez a gyermek konténer is rács. A konténerek alapból Flexbox típusúak, ezért az **Elrendezés** fülön a **Konténerelrendezés** mezőt állítsd **Rács** értékre.
3. A Flexboxról Rácsra váltás alapból 3×2-es rácsot ad. Ha 2×2-es kell, módosítsd az **Elrendezés** fül beállításait.

Most egy négycellás rácsod van, amelynek a 4. cellájában egy másik négycellás rács van.

4. Húzz egy **Szövegszerkesztő** widgetet az új konténer 1. cellájába („Kis csokor”), és egy másikat a 2. cellájába („Nagy csokor”).
5. A 3. és 4. cellába húzz **Kép** widgetet, a kis és a nagy csokor képével.

## A rács panelje

![Rács konténer Elrendezés füle: Rács körvonala, Oszlopok, Sorok, Hézagok és Automatikus elrendezés](./kepek/kontenerek-racs-panel.webp)

*Rács konténer Elrendezés füle: Rács körvonala, Oszlopok, Sorok, Hézagok és Automatikus elrendezés* (https://minta-bolt.hu/wp-admin/post.php?post=20&action=elementor)

A **Konténerelrendezés** **Rács** értéke mellett a **Tételek** csoportban ezek jelennek meg:

| Beállítás | Mit csinál |
|---|---|
| Rács körvonala | A szerkesztőben mutatja a rács cellahatárait (**Mutat**) |
| Oszlopok | Az oszlopok száma (fr egység) |
| Sorok | A sorok száma (fr egység) |
| Hézagok | Az oszlopok és sorok közötti térköz |
| Automatikus elrendezés | Az elemek automatikus elhelyezési iránya (például **Sor**) |

![Négy oszlopos, két soros rács a vásznon üres cellákkal](./kepek/kontenerek-racs-vaszon.webp)

*Négy oszlopos, két soros rács a vásznon üres cellákkal* (https://minta-bolt.hu/wp-admin/post.php?post=20&action=elementor)

A képen egy 4×2-es rács látható: az első két cella már tartalmaz elemet, a többi még üres.

Egy rácscellába tett elem haladó beállításai között megjelenik az **Oszlopok átfogása** és a **Sorok átfogása** (1-től 12-ig, vagy egyéni érték), amellyel az elem több cellát foglalhat el.

## Mi az a Rács konténer?

A Rács konténer a konténerek egyik típusa: egy konténer, amely sorokba és oszlopokba rendezett cellákat tartalmaz. Létrehozáskor megadod a sorok és oszlopok számát, nem kell egyesével konténereket behúznod. A rács segít az elemeket rendezetten, egymáshoz igazítva tartani, és többféle konténer vagy beállítás nélkül is szimmetrikus terveket készíthetsz vele.