Grid

Align Items

The alignItems prop defines the alignment of items along the vertical axis.

A
B
C
A
B
C
A
B
C
A
B
C
() => {
  const propValues = [
    'stretch', // default
    'start',
    'center',
    'end'
  ];

  const renderGrids = () => (
    propValues.map((value, index) => (
      <Grid alignItems={value} key={index}>
        <GridItem>A</GridItem>
        <GridItem>B</GridItem>
        <GridItem>C</GridItem>
      </Grid>
    ))
  );

  return (
    <DemoLayout>
      { renderGrids() }
    </DemoLayout>
  )
}