Masonry

shadow

The Masonry component creates a responsive "Masonry" layout of child elements that are dynamically arranged into columns based on specified attributes. Supports customizing the number of columns, maximum column width, element spacing, and debouncing to optimize performance.

Basic usage

The sample shows the basic masonry composition without further constraints to show how the elements naturally fit into the columns.

Maximum width of columns

Use the max-col-width attribute to limit the width of the columns to the specified value.

The Gap

Use the gap attribute to specify the width of the gap between columns in pixels.

When to use

Use wje-masonry to compose a stable page layout with a clear content hierarchy.

When not to use

Do not use it to solve business logic or for stateful orchestration of components.

Accessibility

Preserve the semantics of the document (header, main, aside, footer) and the logical order of focusable elements.

Recommended practices

• Define desktop/mobile breakpoints first and then fine-tune the details.
• Prefer consistent spacing tokens over ad-hoc margin/padding values.
• For layouts with overflow, always test keyboard navigation and readers.

Attributes and properties

cols

Popis	Nastavuje rozmery alebo veľkosť pre voľbu cols.
Atribút	cols
Typ	number
Predvolené	-

debounce

Popis	Nastavuje číselnú hodnotu používanú vo voľbe debounce.
Atribút	debounce
Typ	number
Predvolené	-

gap

Popis	Nastavuje číselnú hodnotu používanú vo voľbe gap.
Atribút	gap
Typ	number
Predvolené	-

maxColWidth

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-col-width.
Atribút	max-col-width
Typ	number
Predvolené	-

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

renderCols

Popis	Vykreslí cols v používateľskom rozhraní komponentu.
Signatúra	(colCount: number) => void

scheduleLayout

Popis	Spustí metódu scheduleLayout na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(ms: number) => void

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
column	Štýluje shadow časť column.

CSS custom variables

Názov	Popis
--wje-masonry-layout-gap	Vlastná CSS premenná, ktorá riadi layout gap.
--wje-masonry-layout-col-count	Vlastná CSS premenná na štýlovanie komponentu (layout col count).

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.