Bricks Builder Container

A Container a Bricks layoutok natív eleme: egy rugalmas, egymásba ágyazható elem, amely a benne lévő tartalmat CSS Flexbox vagy Grid segítségével rendezi el. Önmagában semmit nem mutat a látogatónak, nincs saját vizuális megjelenése, egyetlen feladata, hogy irány, térköz és igazítás szerint a helyükre tegye a gyerekelemeket. A trükk az, hogy ugyanaz az elem tud vízszintes sor és függőleges oszlop is lenni, attól függően, mit állítasz be a Direction mezőben.

A Bricks 1.5-ös verziója (2022 szeptember) éppen ezért cserélte le a régi Row/Column párost egyetlen Container elemre. Korábban a Row mindig vízszintes sávot jelentett, a Column pedig egy fix helyet ezen belül: kényelmes volt, de merev, és mobilra sokszor új elemekkel kellett dolgozni ahelyett, hogy egy tulajdonságot átállítasz. Ma egy elemtípust kell ismerned, a Flexbox és Grid logika pedig közvetlenül látszik a szerkesztőben. A gyakorlatban leggyakrabban ezekre használom: kártya-, ikon- vagy logósorok vízszintes elrendezésére, két- és háromoszlopos szekciókra, összetettebb grid layoutokra, valamint arra, hogy egy Section-ön belül paddinggel és max-width-tel kordában tartsam a tartalom szélességét.

A sorrend, amit érdemes tartani: Section → Container → Block vagy Div. A Section adja a teljes szélességű vizuális blokkot, a Container végzi a tényleges layout munkát, a Block egy kerek egészet alkotó tartalmi elem (tipikusan egy kártya vagy feature box), a Div pedig csak összefog két-három apróságot, mondjuk egy ikont és egy feliratot. Ha a struktúrapanelen egy Div vagy egy Block ül közvetlenül a Section gyerekeként, ott már megbomlott valami, és hónapok múlva te magad sem fogod érteni, miért. Mindhárom elem egymásba ágyazható, a különbség nem a képességeikben van, hanem abban, mekkora feladatra tervezték őket.

E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Container”, és a vászonra vagy közvetlenül egy meglévő Section-be húzod. Alapértelmezetten row irányban, 100% szélességgel jön létre, onnantól a te dolgod finomhangolni. Ha egy már felépített Container-t másolsz (Ctrl+D / Cmd+D), a teljes tartalma a gyerekelemekkel együtt klónozódik, ami egy összetett kártyalayoutnál sokkal gyorsabb, mint mindent nulláról felépíteni: utána már csak a szövegeket és a képeket kell cserélni. A Ctrl+Shift+Z az utolsó módosítást vonja vissza, ha elrontanál valamit szerkesztés közben.

Elrendezés. A Container alapból Flexbox-ot használ, és öt mező lefedi a helyzetek nagy részét. A Direction row esetén vízszintes (ez az alapértelmezett), column esetén függőleges elrendezést ad. A Wrap engedélyezésével a gyerekelemek új sorba törnek, ha kifogynak a helyből, nowrap esetén inkább összenyomódnak. A Justify Content a főtengely mentén igazít (flex-start, center, space-between, space-around, space-evenly), az Align Items a kereszttengely mentén (stretch, flex-start, center, flex-end). A Gap a gyerekelemek közti távolság, sor- és oszlopirányban külön is beállítható. Három egyenlő szélességű oszlophoz ez a kombináció a legtöbb kártyasornál működik: Direction: row, Wrap: wrap, Justify Content: flex-start, Align Items: stretch, Gap: 24px.

Grid. A Bricks 1.8 óta a Container natívan tud CSS Gridet is, elég a Layout panelen Grid módra váltani. A Grid Template Columns adja meg az oszlopok számát és arányát (repeat(3, 1fr) három egyenlőt jelent, 1fr 2fr egy keskenyebb és egy szélesebb hasábot), a Grid Template Rows a sorok magasságát, a Grid Gap pedig az összes cella közti távolságot egyszerre. Grid-hez akkor nyúlj Flexbox helyett, ha valódi kétdimenziós elrendezésre van szükség (sorok és oszlopok egyszerre számítanak), ha a celláknak pontosan egymáshoz kell igazodniuk, például egyforma magasságú kártyarácsnál, vagy ha egy elemnek több cellát kell áthidalnia (grid-column: span 2). Flex és Grid között utólag is bármikor válthatsz, a tartalom megmarad, de a gyerekelemek szélességét és a gap-et újra kell hangolni, mert a két rendszer másképp számol.

Méret és pozíció. A Width alapból 100%, és Container-en belül mindig a szülő szélességéhez viszonyul, 33.33% tehát három egyenlő oszlopot ad. A Max-width korlátozza a tartalom maximális szélességét (tipikusan 1200px), középre igazításhoz ehhez társítani kell egy margin: 0 auto értéket. A Height jellemzően maradhat auto-n, a tartalom szabja meg, min-height-tel viszont alsó határt adhatsz neki. Ha maga a Container is egy Flexbox-szülő gyereke, a Flex Grow, Shrink és Basis mezőkkel szabályozod, hogyan nő vagy zsugorodik a rendelkezésre álló hely függvényében. Reszponzív oldalon kerüld a fix pixeles szélességet, %, fr és clamp() értékekkel érdemes dolgozni.

Padding, margin, gap. A padding a Container saját belső margója, ez tolja el a tartalmat a Container szélétől, a margin a szomszédos elemekhez ad térközt kívülről. A gyerekelemek közti távolságot viszont ne margin-nal pótold, arra ott a gap: Flexbox és Grid szülőn belül konzisztensebb, és nem kell az utolsó elemről kézzel leszedni a felesleges térközt. Margin csak kivételes esetben, és ott is figyelj a margin collapse jelenségre.

HTML tag. A Container alapból egy sima widget, de a HTML Tag mezőben bármikor lecserélheted valami szemantikusabbra, ami SEO és akadálymentesítés szempontjából is számít:

Egy tipikus kártyasor felépítése így néz ki: a Section adja a hátteret, benne egy Container row iránnyal, 24px gap-pel és 1200px max-width-tel, azon belül pedig három Block, egyenként 33% szélességgel és 32px paddinggel. Ugyanez a Bricks 1.5 előtt Section → Row → három Column volt, tehát a szerkezet logikája nem változott, csak egyetlen elemtípus vette át két másik szerepét. Két-három beágyazási szint általában elég és átlátható, a negyediktől viszont nehezen olvasható a struktúra, és a DOM mélysége is rontja a teljesítményt. Ha egy Container-nek csak egyetlen gyereke van, és semmilyen layout-munkát nem végez, az valószínűleg felesleges szint.

A reszponzív viselkedés a Container legerősebb tulajdonsága, és általában egyetlen beállításon múlik. Egy klasszikus kétoszlopos szekciónál (szöveg az egyik oldalon, kép a másikon) a külső Container row irányú, 48px gap-pel, benne két column irányú Container 50-50% szélességgel. Mobilon elég a külső Container Direction értékét column-ra váltani, és a két blokk egymás alá kerül. Ez a módosítás csak a mobil nézetet érinti, a desktop változatlan marad, és nincs szükség külön mobil-specifikus elemekre. Érdemes a Container-eket a struktúrapanelen át is nevezni (dupla kattintás a nevére: „Hero – szövegoszlop”, „Features – kártyasor”), mert egy összetett oldalon az egyforma „Container” feliratok pár hét múlva teljesen használhatatlanok.