React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CTA Center FormLayout Grid
Basic Usage General Guidelines API List Media Toolbar
CSS Helpers
Readme

# Grid

The responsive Grid layout aligns content into an organized grid.

##
Basic Usage

To implement the Grid component, you need to import it first:

    import { Grid } from '@react-ui-org/react-ui';

And use it:

Grid item
Grid item
Grid item
Grid item
<Grid> <Placeholder bordered>Grid item</Placeholder> <Placeholder bordered>Grid item</Placeholder> <Placeholder bordered>Grid item</Placeholder> <Placeholder bordered>Grid item</Placeholder> </Grid>

    <Grid>  <Placeholder bordered>Grid item</Placeholder>  <Placeholder bordered>Grid item</Placeholder>  <Placeholder bordered>Grid item</Placeholder>  <Placeholder bordered>Grid item</Placeholder></Grid>

See
API for all available options.

## General Guidelines

- To align your items in the grid,
  simply wrap them with the Grid component. Unlike other grid frameworks, no additional markup like GridItem or Cell is necessary. This is possible thanks to the CSS grid layout, the right tool for two-dimensional layouts.

- If you need your items to have equal height even with content of varying length, it may be necessary to set
  `height: 100%` on them.

👉 The default column width algorithm is `repeat(auto-fit, minmax(300px, auto))` and it can be customized with CSS custom properties. More layout options are coming soon!

## API

children
node
null
id
string
undefined

Next: List →