# Azonos elemek térköze egy konténerben

> Négy egyforma widget egyenletes elrendezése egy konténerben, asztali, táblagépes és mobil nézetben, kevés testreszabással.

Ha egy konténerben több, egyenletes térközű, azonos elem áll, a reszponzív megjelenésnél gond lehet: az elemek nem minden képernyőszélességnél rendeződnek úgy, ahogy szeretnéd. Általában minden képernyőmérethez külön kellene igazítani a tervet, de ezzel a módszerrel a legtöbb esetben elég egyetlen mobil töréspontot beállítani.

A feladathoz négy tulajdonságot használsz:

- a tartalom igazítását (**Tartalom igazítása**),
- a widget szélességét,
- az elemek közötti hézagot,
- a nézetablak szélességének változtatását az ellenőrzéshez.

A példában egy konténerben négy **Ikondoboz** widget áll, de beágyazott konténerekkel is ugyanígy működik (lásd [Azonos elemek térköze beágyazott konténerekkel](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-azonos-elemek-terkoze/)).

## Az asztali nézet

1. A konténer **Elrendezés** fülén állítsd az **Irány** értékét sorra, a **Tartalom igazítása** mezőt pedig **Térköz az elemek között** értékre. Így egyenlő hely lesz a widgetek között.
2. Add meg a widgetek szélességét a **Haladó** fülön. Itt nem feltétlenül szükséges, mert minden widget azonos, de valós terveknél ez ritka. Állíts be egyéni szélességet, itt 15%-ot minden widgethez.
3. Térj vissza az **Elrendezés** fülre, és adj meg **Hézagok** értéket, hogy az elemek között mindig maradjon hely. Elvileg a **Térköz az elemek között** ezt is biztosítja, de vannak szélsőséges esetek, amikor nem. Itt 5% jó érték, a tervtől függően általában 1 és 9% között.

Tipp: az első widget beállítása után kattints jobb gombbal a widget jobb felső sarkára, és válaszd a **Másolás** pontot. Egy másik widget jobb felső sarkán jobb gombbal a **Stílus beillesztése** pontot választva a widget átveszi az első beállításait, például a szélességet.

## A reszponzív beállítás

1. Lépj reszponzív módba, és válaszd a **Táblagép** nézetet.
2. Mind a négy elem látszik, de táblagépen jobban mutat a két oszlopos elrendezés. Ehhez állítsd mindegyik widget szélességét 40%-ra a **Haladó** fülön. Oszlopokra bontáskor érdemes olyan százalékot választani, amelyek összege kicsit 100% alatt van. Az elemek még nem biztos, hogy két oszlopba rendeződnek, ezt a tördelés beállítása oldja meg.
3. Jelöld ki a konténert.
4. Az **Elrendezés** fülön állítsd a **Tartalom igazítása** értékét **Középre**. Így az elemek széles táblagépen sem szóródnak szét.
5. Váltsd a **Hézagok** mértékegységét PX-re, és állítsd 55 px-re. Táblagépen és mobilon a képpont jobban működik a hézagnál.
6. Kapcsold be a **Tördelést**, hogy az elemek két oszlopba törjenek.
7. Lépj reszponzív módba, és válaszd a **Mobil** nézetet.
8. Állítsd a **Hézagok** értékét 70 px-re (a pontos érték a tervtől függ).
9. A nézetablak fogantyúival ellenőrizd az elrendezést, és szükség esetén finomíts.

A legtöbb esetben az elrendezés mobilon, még széles képernyős mobilon is jó lesz, így nem kell külön töréspontokat tervezni.