LazyVGrid

LazyVGrid is a grid variant with row-first flow defaults, useful for dense vertical content patterns.

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

<LazyVGrid alignItems="start" gap="1rem" min="12rem">
  <GridItem colSpan="full">
    <Card><CardContent>Hero section</CardContent></Card>
  </GridItem>
  <GridItem colSpan={2}><Card><CardContent>Overview</CardContent></Card></GridItem>
  <GridItem><Card><CardContent>Metric A</CardContent></Card></GridItem>
  <GridItem><Card><CardContent>Metric B</CardContent></Card></GridItem>
</LazyVGrid>

#Import

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

#Accessibility

LazyVGrid is layout-only. Use semantic markup in children and avoid using this component to convey meaning.

#API

• Inherits all Grid props.
• Defaults autoFlow to "row".
• GridItem can still control span behavior with colSpan and rowSpan.

#Styling

Spacing and tracks are emitted through CSS variables with defaults from --eui-grid-* and fallback values from layout.css.