LazyHGrid - EnterUI

Updated 3 October 2026

LazyHGrid keeps auto-flow column-oriented by default and is useful for dense row-like grouping in horizontal streams.

Nested layouts keep their own alignment, track templates, and responsive min/gap values; these settings do not leak from a surrounding Grid. Omitted breakpoints use the nearest earlier value from this instance.

#Default usage

Item 1

Item 2

Item 3

<LazyHGrid alignItems="start" gap="0.75rem" min="8rem">
  <GridItem><Card><CardContent>Item 1</CardContent></Card></GridItem>
  <GridItem><Card><CardContent>Item 2</CardContent></Card></GridItem>
  <GridItem><Card><CardContent>Item 3</CardContent></Card></GridItem>
</LazyHGrid>

#Import

import { GridItem, LazyHGrid } from "@froggdesign/enter-ui-react";

#Accessibility

LazyHGrid is layout-only. Keep semantic structure in child content and avoid using layout containers as accessibility cues.

#API

Inherits all Grid props.
Defaults autoFlow to "column".
Supports responsive min and gap.

#Styling

Uses .eui-grid plus --eui-grid-auto-flow: column defaults through inline CSS variables so it remains SSR-safe.