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

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 stable page structure with clear visual and semantic hierarchy.

When not to use

Do not use layout components to handle business logic or application orchestration.

Accessibility

Preserve document semantics (header, main, aside, footer) and logical tab/focus order.

Best Practices

• Define mobile/desktop breakpoints first, then refine visual details.
• Prefer spacing tokens over ad-hoc margin/padding overrides.
• Test keyboard and screen reader behavior for overflow scenarios.

Attributes and Properties

maxColWidth

Description	Getter for the maxColWidth property.
Attribute	max-col-width
Type	number
Default	-

gap

Description	Getter for the gap property.
Attribute	gap
Type	number
Default	-

cols

Description	Getter for the cols property.
Attribute	cols
Type	number
Default	-

Events

No events available for this component.

Methods

renderCols

Description	Renders the columns.
Signature	(colCount: number) => void

scheduleLayout

Description	Schedules a layout.
Signature	(ms: number) => void

CSS Shadow Parts

Name	Description
native	The native part of the masonry layout.
column	The individual columns in the masonry layout.

CSS Custom Properties

Name	Description
--wje-masonry-layout-gap	The gap between items in the masonry layout. Accepts any valid CSS length. Default is 1rem.
--wje-masonry-layout-col-count	The count column in the masonry layout. Accepts any valid CSS length.

Slots

Name	Description
default	The default slot for the masonry layout.