Grid provides a CSS Grid container with style display: grid
. Any Amplify UI components can be used as grid item children. To learn how to use CSS Grid properties, see the following documentation:
Demo
This demo shows how to create a basic layout using the Grid primitive.
Usage
Import the Grid primitive. Use any primitive as grid item child components.
import { Grid, View, useTheme } from '@aws-amplify/ui-react';
export const DefaultGridExample = () => {
const { tokens } = useTheme();
return (
<Grid
templateColumns="1fr 1fr"
templateRows="10rem 10rem"
gap={tokens.space.small}
>
<View backgroundColor={tokens.colors.blue[10]}></View>
<View backgroundColor={tokens.colors.blue[20]}></View>
<View backgroundColor={tokens.colors.blue[40]}></View>
<View backgroundColor={tokens.colors.blue[60]}></View>
</Grid>
);
};
Mapping Grid CSS properties to Grid props
We've shortened some of the names of the CSS properties for a cleaner prop API. See the following list prop names (CSS => Grid props):
Grid container:
grid-auto-columns
=>autoColumns
grid-auto-flow
=>autoFlow
grid-template-areas
=>templateAreas
grid-template-columns
=>templateColumns
grid-template-rows
=>templateRows
column-gap
=>columnGap
row-gap
=>rowGrap
gap
=>gap
align-items
=>alignItems
align-content
=>alignContent
justify-content
=>justifyContent
Grid items *:
grid-area
=>area
grid-column
=>column
grid-column-start
=>columnStart
grid-column-end
=>columnEnd
grid-row
=>row
grid-row-start
=>rowStart
grid-row-end
=>rowEnd
*Note: rowSpan
and columnSpan
grid item props are transformed to
row
and column
span rules.
Row and column span
Use the rowSpan
or columnSpan
props to stretch a grid item across multiple rows or columns. Available values are any integer value or auto
.
While rowSpan
and columnSpan
do not map to CSS properties, they are transformed to row
and column
style rules.
import { Grid, View, useTheme } from '@aws-amplify/ui-react';
export const GridRowAndColumnSpanExample = () => {
const { tokens } = useTheme();
return (
<Grid
templateColumns="1fr 1fr"
templateRows="10rem 10rem 10rem"
gap={tokens.space.small}
>
<View columnSpan={2} backgroundColor={tokens.colors.orange[10]}></View>
<View rowSpan={2} backgroundColor={tokens.colors.orange[20]}></View>
<View backgroundColor={tokens.colors.orange[40]}></View>
<View backgroundColor={tokens.colors.orange[60]}></View>
</Grid>
);
};
Responsive layouts
Use array or object syntax to dynamically change layout based on screen size. Resize browser to see example below.
See responsive design for more details.
import { Grid, View, useTheme } from '@aws-amplify/ui-react';
export const GridResponsiveExample = () => {
const { tokens } = useTheme();
return (
<Grid
templateColumns={{ base: '1fr', large: '1fr 1fr' }}
templateRows={{ base: 'repeat(4, 10rem)', large: 'repeat(3, 10rem)' }}
gap={tokens.space.small}
>
<View
columnSpan={[1, 1, 1, 2]}
backgroundColor={tokens.colors.pink[10]}
></View>
<View
rowSpan={{ base: 1, large: 2 }}
backgroundColor={tokens.colors.pink[20]}
></View>
<View backgroundColor={tokens.colors.pink[40]}></View>
<View backgroundColor={tokens.colors.pink[60]}></View>
</Grid>
);
};
CSS Styling
Target classes
Class | Description |
---|---|
amplify-grid | Top level element that wraps the Grid primitive |