# Azonos elemek térköze beágyazott konténerekkel

> Négy egyforma elem egyenletes elrendezése konténerekben, 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. Ezzel a módszerrel sokkal kevesebb eszközönkénti testreszabás kell.

Az Ikondoboz widgetekkel megoldható változat a [Flexbox konténerek működése](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-flexbox-mukodese/) fejezetben szerepel. Itt egy plusz dizájnelem, például elválasztó is kell, ezért ikondoboz helyett beágyazott konténereket használunk.

Az elrendezéshez ezeket a tulajdonságokat használjuk: tartalom igazítása, konténer szélessége, elemek közötti hézag, tördelés, elemméret és a nézetablak szélességének változtatása.

## Az asztali nézet

Négy ikondoboz helyett négy beágyazott konténert veszel fel, és mindegyikbe további konténereket teszel. Ikon helyett képet használsz. A leírásban a legnagyobb a **külső konténer**, a benne lévő négy a **középső konténer**, a tartalmat ténylegesen hordozók pedig a **belső konténerek**.

A beágyazott konténerek az oldal sebességét nem rontják.

1. A külső konténer **Elrendezés** fülén állítsd az elemeket sorba, és a **Tartalom igazítása** legyen **Térköz az elemek között**. Így egyenlő hely lesz a középső konténerek között.
2. A középső konténerek **Elrendezés** fülén állítsd az elemeket oszlopba, a **Tartalom igazítása** itt is **Térköz az elemek között**.
3. Állíts be **Hézagok** értéket, hogy az elemek közt 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.
4. Add meg a középső konténerek szélességét. Ebben a példában nem feltétlenül szükséges, mert minden konténer azonos, de a valós tervekben ez ritka. A **Haladó** fülön állíts be egyéni szélességet, itt 20%-ot.

Tipp: az első konténer beállítása után jobb gombbal kattints a konténer jobb felső sarkára, és válaszd a **Másolás** pontot. Egy másik konténer jobb felső sarkán jobb gombbal a **Stílus beillesztése** pontot választva a második konténer átveszi az első beállításait, például a szélességet. A menüt a [Jobb gombos menük](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-jobb-klikk/) fejezet írja le.

## 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. Állítsd a külső konténert **Tördelés** értékre, így a középső konténerek két oszlopba törnek.
3. A **Tartalom igazítása** legyen **Középre**, hogy az elemek széles táblagépen se szóródjanak szét.
4. 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.
5. Állítsd a középső konténerek szélességét 40%-ra. Oszlopokra bontáskor érdemes olyan százalékot választani, amelyek összege kicsit 100% alatt van.
6. Válaszd a **Mobil** nézetet.
7. A középső konténerek **Haladó** fülén a **Méret** legyen **Növekedés**, így a konténerek a látogató telefonjának szélességétől függetlenül a legjobban töltik ki a helyet.
8. 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.