# CSS Grid az atomikus szerkesztőben

> Az atomikus Rács elem: oszlopok és sorok megadása, rácselemek kiterjesztése, sűrű automatikus elhelyezés.

A **Rács** elem a CSS Grid sor- és oszlopalapú elrendezését hozza az atomikus szerkesztőbe, az ingyenes Elementorban is. Pontosan szabályozhatod vele az elemek helyét és méretét, így galériákat, kártyás szakaszokat és funkciórácsokat is felépíthetsz. Mivel natívan működik együtt az Elementor osztályaival és változóival, a tervezési rendszeredet külön beállítás nélkül is egységesen tarthatod.

## A funkció bekapcsolása

A Rács eléréséhez az atomikus szerkesztőnek aktívnak kell lennie a webhelyen:

1. Menj az **Elementor → Szerkesztő → Beállítások** oldalra.
2. Keresd meg az **Atomic szerkesztő** kártyát.
3. Kattints az új élmény bekapcsolására szolgáló gombra.

Az Elementor 4.x verziókban az atomikus elemek alapértelmezetten be vannak kapcsolva. Az **Atomikus elemek** csoportban találod a **Rács** elemet. A [Atomic szerkesztő](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-atomic-szerkeszto/) fejezet részletesen leírja a bekapcsolást.

## A Rács beállításai

Jelöld ki a Rács elemet, és nyisd meg a **Stílus** fület, majd az **Elrendezés** szakaszt. A **Megjelenítés** mezőben a **Rács** van kiválasztva (a többi lehetőség: **Blokk**, **Flex**, **Nincs**).

![A Rács elem Stílus füle: Megjelenítés, Rácskörvonal megjelenítése, Oszlopok, Sorok, Automatikus elhelyezés](./kepek/szerkeszto-atomic-racs-panel.webp)

*A Rács elem Stílus füle: Megjelenítés, Rácskörvonal megjelenítése, Oszlopok, Sorok, Automatikus elhelyezés* (https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor)

A képen az **Elrendezés** szakasz látszik a **Rácskörvonal megjelenítése** kapcsolóval, az **Oszlopok** és **Sorok** mezőkkel (**FR** egységben) és az **Automatikus elhelyezés** gombokkal.

### Szülő Rács beállításai

- **Oszlopok** és **Sorok:** megadod a rács oszlopainak és soraiban lévő sávok számát vagy méretét. Bármilyen szabványos CSS-egységet használhatsz, köztük az **FR** (törtrész) egységet is, amellyel rugalmas elrendezést készíthetsz.
- **Automatikus elhelyezés:** a rács kitöltési irányát adja meg. A **Továbbiak megjelenítése** gomb további beállításokat nyit, itt található a sűrű automatikus elhelyezés is.
- **Hézagok:** az oszlopok (**Oszlop**) és sorok (**Sor**) közötti távolság pixelben.
- **Rácskörvonal megjelenítése:** ha bekapcsolod, a rács vonalai láthatók a vásznon. Ez csak szerkesztői segédlet, a webhelyen nem jelenik meg.

### A Rácsba tett elemek beállításai

Ha egy elemet egy Rács elembe teszel, annak a **Stílus** fülén külön rácselem-beállítások jelennek meg:

- **Rács oszlop** és **Rács sor:** egyetlen elemet több sávra is kiterjeszthetsz (például egy kiemelt bejegyzés két oszlopot foglal el).
- **Saját igazítás** és **Sorrend:** felülírja az alapértelmezett pozíciót, így a függőleges igazítást és a forrás szerinti sorrendet a többitől függetlenül szabályozhatod.
- **Sűrű automatikus elhelyezés:** speciális algoritmus, amely a kisebb elemeket automatikusan a nagyobb, kiterjesztett elemek után maradt üres cellákba tolja, így nem maradnak hézagok az elrendezésben.

## Reszponzív termékgaléria készítése

1. Nyisd meg az Elementor szerkesztőt egy új vagy meglévő oldalon.
2. Húzd a **Rács** elemet az elempanelről a vászonra.
3. Tegyél a Rácsba több gyermekelemet (például **Kép**, **Címsor**, **Bekezdés** vagy **Gomb**).
4. Jelöld ki a szülő Rács elemet, és nyisd meg az **Elrendezés** szakaszt.
5. Állítsd be az oszlopokat, sorokat, hézagokat és az automatikus elhelyezést a galéria szerkezetének megfelelően. Használhatsz bármilyen CSS-egységet, az **FR**-t is.
6. Kapcsold be a **Rácskörvonal megjelenítése** kapcsolót, hogy lásd a rácsvonalakat a vásznon.
7. Jelölj ki egy gyermekelemet, és a rácselem-beállításokban állítsd be az oszlop- és sorkiterjesztést, hogy több sávot foglaljon el.
8. Kapcsold be a sűrű automatikus elhelyezést a szülő Rács beállításai között, és ellenőrizd, hogy az elrendezés kitölti az üres cellákat.
9. Alkalmazz meglévő osztályokat és változókat a Rácsra és a gyermekelemekre, hogy egységes maradjon a dizájn.
10. Mentsd az oldalt, és ellenőrizd az elrendezést a szerkesztőben és a webhelyen is.

## Teljesítmény a szerkesztőben

A több száz egymásba ágyazott tárolót tartalmazó elrendezések lassíthatják a böngészőt. Az Elementor kifejezetten a mélyen egymásba ágyazott Rács elrendezések szerkesztői megjelenítését optimalizálta.

> **Megjegyzés**
>
> Ez csak a szerkesztővászon gyorsítása, a webhely betöltési sebességét nem érinti: azt a CSS Grid kimenete már eleve gyorsan kezeli.

## Gyakori kérdések

**Átalakíthatok egy meglévő Flexbox tárolót Rácsá?**
Igen. Jelölj ki egy meglévő atomikus Flex tárolót, és az **Elrendezés** szakasz **Megjelenítés** mezőjében válts **Rács** értékre.

**Mi az a sűrű automatikus elhelyezés?**
Olyan beállítás, amelynél a rács algoritmusa aktívan kitölti a kiterjesztett elemek után maradt üres cellákat. Így az elrendezés kézi átrendezés nélkül is tömör marad.