# Masonry elrendezés

> Masonry (egymásba illeszkedő) rács bármely elrendezéselemen: oszlopok, térközök, animáció és hibaelhárítás.

A masonry elrendezés bármelyik elrendezéselemre (Szakasz, Tároló, Blokk, Div) rákapcsolható. A vezérlők a **Stílus → Elrendezés → Masonry** részben vannak.

![A Masonry vezérlők egy Szakasz stílusbeállításai között: Masonry elrendezés, Oszlopok, Térközök, Vízszintes sorrend, Átmenet: Időtartam és Felfedési animáció](./kepek/stilusok-2-masonry.webp)

*A Masonry vezérlők egy Szakasz stílusbeállításai között: Masonry elrendezés, Oszlopok, Térközök, Vízszintes sorrend, Átmenet: Időtartam és Felfedési animáció* (https://minta-bolt.hu/home/?bricks=run)

A képen a bekapcsolt **Masonry elrendezés** kapcsoló alatt az **Oszlopok** és a **Térközök** mező látszik, lejjebb az animáció beállításai.

A Bricks az IsotopeJS könyvtárat használja hozzá, ugyanazt, mint a Képgaléria és a Bejegyzések elem.

## Hogyan működik

Bekapcsolt masonry elrendezésnél az elem összes közvetlen gyermeke masonry elem lesz. Az oszlopok számát és a térközöket töréspontonként külön megadhatod, így az elrendezés reszponzív marad.

A masonryt lekérdezési ciklus elemeit körbefogó elemen is használhatod: így a bejegyzések, termékek vagy más ismétlődő tartalom lépcsőzetes, változatos magasságú rácsban jelenik meg.

## Saját interakciós animáció használata

Ha a gyermekelemeken az **Interakciók** panelen saját animációt adsz meg (például belépés a nézetbe indító eseménnyel), a masonry alapanimációját kapcsold ki: az **Átmenet: Időtartam** értéke legyen `0`. Így a két animáció nem akad össze, és a hatás simább lesz.

## Hibaelhárítás

### Egyéni CSS ütközik a beállítással

Ha a masonry oszlopok nem a beállításnak megfelelően helyezkednek el, nézd meg a gyermekelemekre alkalmazott CSS-t. Az olyan stílusok, mint a `width`, a `flex-basis` vagy az `align-self` flex elrendezésben felülírhatják az oszlopbeállításokat. Módosítsd vagy töröld őket.

### Tartalom hozzáadása egyéni JavaScripttel vagy AJAX-szal

Ha saját kód vagy bővítmény JavaScripttel vagy AJAX-szal ad hozzá új gyermekelemeket, a masonry elrendezés előfordulhat, hogy nem frissül. Ilyenkor a masonry példányt kézzel frissítheted:

```javascript
bricksUtils.updateIsotopeInstance('BRICKS_ID');
```

A `'BRICKS_ID'` helyére a masonry elem azonosítóját írd. A függvény újraindítja az elrendezést, hogy az új elemek is beilleszkedjenek.