Grid

<zeno-grid>LayoutSource

A grid layout with a column count that can change per breakpoint.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Columns

cols is the number of equal columns.

Inbox Drafts Sent Archive Spam Bin

<zeno-grid cols="3">
  <zeno-paper outlined>Inbox</zeno-paper>
  <zeno-paper outlined>Drafts</zeno-paper>
  <zeno-paper outlined>Sent</zeno-paper>
  <zeno-paper outlined>Archive</zeno-paper>
  <zeno-paper outlined>Spam</zeno-paper>
  <zeno-paper outlined>Bin</zeno-paper>
</zeno-grid>

Gap

A number picks a step of the spacing scale. gap="2" uses --zeno-spacing-2.

Mon Tue Wed Thu

The same grid with a larger gap:

Mon Tue Wed Thu

<zeno-grid cols="4" gap="2">
  <zeno-paper outlined>Mon</zeno-paper>
  <zeno-paper outlined>Tue</zeno-paper>
  <zeno-paper outlined>Wed</zeno-paper>
  <zeno-paper outlined>Thu</zeno-paper>
</zeno-grid>
<p>The same grid with a larger gap:</p>
<zeno-grid cols="4" gap="8">
  <zeno-paper outlined>Mon</zeno-paper>
  <zeno-paper outlined>Tue</zeno-paper>
  <zeno-paper outlined>Wed</zeno-paper>
  <zeno-paper outlined>Thu</zeno-paper>
</zeno-grid>

Alignment

By default the items stretch to the height of the row. align places them at the start, centre or end.

Short A longer item
with a second line
and a third line Short

<zeno-grid cols="3" align="center">
  <zeno-paper outlined>Short</zeno-paper>
  <zeno-paper outlined>A longer item<br />with a second line<br />and a third line</zeno-paper>
  <zeno-paper outlined>Short</zeno-paper>
</zeno-grid>

Attributes and properties

Property	Attribute	Type	Default	Description
cols	cols	ResponsiveValue<number>	1
gap	gap	ResponsiveValue<string | number>	4
align	align	'start' | 'center' | 'end' | 'stretch'	'stretch'
justify	justify	'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'	'start'
flow	flow	'row' | 'column' | 'row-dense' | 'column-dense'	'row'
inline	inline	boolean	false
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

Slot	Description
Default	The grid items.

CSS parts

Part
base

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Types

type ResponsiveValue<T> = T | { xs?: T; sm?: T; md?: T; lg?: T; xl?: T };

Accessibility

Keyboard

This element handles no keys of its own.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• The grid is not interactive and adds no keyboard behaviour.
• The inner element has role="group". It is named by the aria-label of the element, or “Grid layout” when there is none.
• The items keep their order in the page. The grid only changes where they are drawn.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

7 of the 11 properties, methods, events, slots and parts above have no description in the source

• the property cols
• the property gap
• the property align
• the property justify
• the property flow
• the property inline
• the part base

Known gaps:

• Responsive values do not work. With cols or gap set to an object such as { xs: 1, md: 3 }, only the xs value (or the first value) is used at every screen width. The inline style on the grid overrides the media queries.
• flow="row-dense" and flow="column-dense" have no effect. They are written to grid-auto-flow unchanged, and that is not valid CSS.
• inline does not make the grid sit in a line of text. The element itself stays a full-width block.
• A CSS length for gap, such as 1rem, only works as a property. The attribute is read as JSON, so only a number or a JSON object works there.
• justify has no visible effect. The columns always fill the full width, so there is no free space to share out.
• Every grid is announced as a group named “Grid layout”, in English, unless it has an aria-label. The role cannot be removed.