Bricks Builder Container: Teljes útmutató a helyes layout-építéshez (2026)

A Bricks Builder Container elem a Bricks 1.5 óta az elsődleges layout-építő egység – ez váltotta fel a korábbi Row és Column elemeket. Flexbox vagy Grid alapú elrendezést biztosít, szabadon egymásba ágyazható, és minden belső tartalom ebben helyezkedik el. A leggyakoribb hiba: a fejlesztők nem tartják be a Section → Container → Block/Div hierarchiát, ami következetlen, nehezen karbantartható struktúrát eredményez.

Rövid válasz: A Container egy rugalmas, egymásba ágyazható layout-elem, amely CSS Flexboxot vagy Gridot használ a belső tartalom elrendezéséhez. A Bricks Builder 1.5-ös verziójától (2022 szeptember) a Row és Column elemeket teljesen felváltotta.

A Container egyszerre tud „sor” és „oszlop” is lenni – a beállított iránytól (Direction) függően. Ez teszi rugalmassá: nem kell különböző elemtípusokat használni vízszintes és függőleges elrendezéshez, elég egyetlen elemtípust variálni.

Mire való, mire használom konkrétan?
– Tartalom vízszintes elrendezésére (kártyasor, ikonsor, logósor).
– Kétoszlopos, háromoszlopos és komplex grid layout-ok építésére.
– Belső padding és max-width kezelésére a Section-ön belül.
– Egymásba ágyazott, összetett layout-blokkok felépítésére.

A Row–Column rendszer merev volt – egy Row mindig vízszintes elrendezést jelentett, egy Column pedig mindig egy fix helyet foglalt el. A Container szabadon konfigurálható, iránya megváltoztatható, és reszponzív nézetenként más viselkedést vehet fel.

A Bricks 1.5 előtt a hierarchia így nézett ki:

Section
└── Row
├── Column (33%)
├── Column (33%)
└── Column (33%)

A Bricks 1.5 után:

Section
└── Container (direction: row)
├── Container (direction: column, width: 33%)
├── Container (direction: column, width: 33%)
└── Container (direction: column, width: 33%)

Az új rendszer előnye: ugyanaz az elem viselkedik sorként és oszlopként is, a Direction beállítástól függően. Ez egységesebb, kevesebb elemtípust kell megtanulni, és a Flexbox/Grid logikája közvetlenül megjelenik a szerkesztőben.

Ez az egyik legfontosabb és leggyakrabban félreértett kérdés.
A helyes sorrend: Section → Container → Block / Div / egyéb elemek. Ha ezt nem tartod be következetesen, az oldalad struktúrája kaotikussá válik, és karbantarthatósága drasztikusan csökken.

Saját tapasztalatom alapján ez a leggyakoribb probléma, amit fejlesztőknél látok: nem tartják be a Section/Container/Block/Div hierarchiát. Ennek eredménye: Container-ek keverednek Block-okkal azonos szinten, Div-ek kerülnek Section szintű szerepbe, vagy a fejlesztő minden szintre más elemet használ, következetlenül. Az eredmény egy olyan struktúra, amit három hónap múlva már ő maga sem ért.

A négy szint szerepe:

| Szint | Elem | Feladata |
|—|—|—|
| 1. szint | Section | Teljes szélességű blokkok (hero, features, footer) |
| 2. szint | Container | Layout-elrendezés (oszlopok, sorok, grid) |
| 3. szint | Block | Önálló tartalmi egység (kártya, feature box) |
| 4. szint | Div | Apró wrapper, segéd-elem (ikon + szöveg együtt) |

Helyes példa – kártyasor:

Section (háttér: #f5f5f5)
└── Container (direction: row, gap: 24px, max-width: 1200px)
├── Block (width: 33%, padding: 32px) ← kártya 1
├── Block (width: 33%, padding: 32px) ← kártya 2
└── Block (width: 33%, padding: 32px) ← kártya 3

Helytelen példa – vegyes hierarchia:

Section
├── Container
├── Div ← nem ide való
├── Block ← nem ide való Section-ba közvetlenül
└── Container

1. Nyisd meg a Bricks Builder szerkesztőt.
2. Kattints az „Add element” (+) gombra, vagy nyomj E billentyűt.
3. Keresd meg a „Container” elemet, és húzd a vászonra vagy egy Section-be.
4. Alapértelmezetten direction: row és width: 100% értékekkel indul.

Tipp: Ha egy meglévő Container-t másolsz (Ctrl+D / Cmd+D), a tartalommal együtt klónozódik. Összetett kártyáknál ez gyorsabb, mint nulláról felépíteni.

Elrendezés (Layout / Flexbox)

A Container alapértelmezetten Flexbox alapú. A legfontosabb beállítások:

– Direction: row (vízszintes, ez az alapértelmezett) vagy column (függőleges).
– Wrap: wrap engedélyezésével a gyerekelemek új sorba törnek, ha nincs elég hely. nowrap esetén összenyomódnak.
– Justify Content: A főtengely mentén igazítja a tartalmakat (flex-start, center, space-between, space-around, space-evenly).
– Align Items: A kereszttengely mentén igazít (stretch, flex-start, center, flex-end).
– Gap: A gyerekelemek közötti távolság (row-gap és column-gap külön-külön is beállítható).

Konkrét példa – három egyenlő oszlop, közepes köz:

Direction: row
Wrap: wrap
Justify Content: flex-start
Align Items: stretch
Gap: 24px

A Bricks 1.8-tól a Container natívan támogatja a CSS Grid-et. A Layout panelen váltj „Grid” módra:

– Grid Template Columns: pl. repeat(3, 1fr) = három egyenlő oszlop; 1fr 2fr = egy keskenyre, egy szélesre.
– Grid Template Rows: sorok magassága.
– Grid Gap: az összes cella közötti távolság.

Mikor használj Grid-et Flexbox helyett?
– Ha kétdimenziós elrendezésre van szükséged (sorok és oszlopok egyszerre).
– Ha a cellák egymáshoz képest pontosan igazodnak kell (pl. kártyarács egyforma magasságú sorokkal).
– Ha grid-column: span 2 típusú áthidalásra van szükség.

– Width: Alapértelmezetten 100%. Ha az elem egy Container-en belül van, a szülő szélességéhez képest értelmezhető (pl. 33.33% = három egyenlő oszlop).
– Max-width: A belső tartalom maximális szélessége (pl. 1200px). Középre igazításhoz adj margin: 0 auto értéket.
– Height: Általában auto – a tartalom szabja meg. min-height értékkel megadhatod az alsó határt.
– Flex Grow / Shrink / Basis: Ha a Container maga is egy Flexbox-szülőn belül van, ezekkel szabályozod, hogy hogyan növekszik vagy zsugorodik.

Alapértelmezetten, de megváltoztathatod:

Ez az egyik leggyakoribb feladat – szöveg bal oldalon, kép jobb oldalon (vagy fordítva).

Lépések:

1. Adj hozzá egy Container-t a Section-be (direction: row, gap: 48px).
2. Helyezz bele két Container-t (mindkettő direction: column).
3. Az első Container: width: 50%, tartalom: szöveg, cím, gomb.
4. A második Container: width: 50%, tartalom: kép.
5. Mobilon: a külső Container direction-jét állítsd column-ra a mobil nézetben – így a két blokk egymás alá kerül.

Reszponzív váltás beállítása (mobilon):

Desktop: Direction → row
Mobile: Direction → column

Ez az egyetlen beállítás elegendő ahhoz, hogy a kétoszlopos layout mobilon egymás alá rendeződjön.

– Ne tegyél Container-t Container-be indok nélkül. Minden egymásba ágyazott szint növeli a DOM mélységét és lassítja az oldalt. Ha egy Container-nek csak egy gyereke van, és nem végez layout-munkát, valószínűleg felesleges.
– Ne használj Container-t egyetlen elem köré apró igazításhoz – erre való a Div.
– Ne állíts fix pixel szélességet Container-re, ha az reszponzív oldalon belül van – használj %, fr vagy clamp() értékeket helyette.

A Container nem tölti ki a szülő szélességét

Ok: A Container width értéke nincs 100%-ra állítva, vagy a szülő Flexbox-beállítása korlátozza.

Megoldás: Ellenőrizd a Container width értékét (legyen 100% vagy auto Flex-szülőben flex-grow: 1-gyel).

Az elemek mobilon nem rendeződnek egymás alá

Ok: A Direction beállítás nincs mobilra column-ra állítva.

Megoldás: Váltj mobilnézetre a szerkesztőben, és a külső Container Direction értékét állítsd column-ra. Ez csak a mobil nézetet érinti, a desktop változatlan marad.

A gap nem jelenik meg az elemek között

Ok: A gap csak Flexbox vagy Grid szülőn belül működik. Ha a szülő display: block, a gap nincs hatással.

Megoldás: Ellenőrizd, hogy a Container display értéke flex vagy grid – ha block, a gap nem érvényes, margin-t kell használni helyette.

Az egymásba ágyazott Container-ek összekeverednek a struktúrában

Ok: Nincs következetes hierarchia – a fejlesztő nem tartotta be a Section → Container → Block/Div sorrendet.

Megoldás: Nyisd meg a bal oldali struktúrapanelt (Structure panel), és ellenőrizd, hogy az elemek szintjei logikusan épülnek-e egymásra. Ha zavart okoz a struktúra, nevezd át az elemeket a neve mezőben (pl. „Kártyasor container”, „Szövegoszlop”) – ez a panel áttekinthetőbbé teszi az egész oldalt.

Mielőtt élesbe teszed az oldalt, ellenőrizd minden Container-nél:

– A Direction beállítás helyes (row / column)?
– Mobilon a Direction átáll column-ra, ha szükséges?
– A gap értéke be van állítva, nem marginnal pótolod?
– A szélességek összeadódnak 100%-ra (pl. 33% + 33% + 33%)?
– Nincs felesleges, üres Container az oldalon?
– A HTML tag szemantikailag helyes (article, nav, aside, stb.)?
– Max-width és margin: auto be van állítva, ha a tartalom középre igazítandó?
– A struktúrapanel alapján a hierarchia következetes (Section → Container → Block)?

A Bricks Builder Container a modern layout-építés alapköve. Helyes használatával bármilyen elrendezés megvalósítható, felesleges elemek nélkül.

A legfontosabb elvek:

– Tartsd be a Section → Container → Block → Div hierarchiát minden oldalon következetesen – ez a legtöbb layout-probléma gyökere, ha hiányzik.
– A Direction, Justify Content és Align Items beállítások hármasa szinte minden Flexbox-elrendezést lefed.
– Mobilon a Direction: column váltás az egyik legegyszerűbb és leghatékonyabb reszponzív megoldás.
– Grid-et akkor használj, ha kétdimenziós elrendezésre vagy cella-áthidalásra van szükséged.
– Nevezd el a Container-eket a struktúrapanelen – ez hónapok múlva is átlátható marad.

Ha ezeket betartod, az oldalad struktúrája következetes, a kódbázis karbantartható, és más fejlesztő is könnyen eligazodik benne.

Vörös László WordPress fejlesztő és Bricks Builder szakértő. 18+ éve foglalkozik weboldalak tervezésével és fejlesztésével.