LazyVGrid - EnterUI

Layout UtilitiesUpdated 6 May 2026

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

#Default usage

Hero section

Overview

Metric A

Metric B

<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.