Amplify UI

Grid

Grid provides a layout container using CSS Grid.

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

ClassDescription
amplify-gridTop level element that wraps the Grid primitive
No variables available for this component

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.