Falcon UI

gridLayout

GridLayout component is rendered by default as a <div> with display: grid (CSS Grid Layout) and accepts other responsive, theme-based style props such as (gridTemplateColumns, gridTemplateColumns etc).

xxxxxxxxxx
 
import { GridLayout } from '@deity/falcon-ui';

c 1

c 2

c 3

c 4

c 5

 
<GridLayout gridTemplateColumns="1fr 2fr" gridTemplateRows="10vh 20vh 10vh">
  <Box boxShadow="subtle" p="md">
    c 1
  </Box>
  <Box boxShadow="subtle" p="md">
    c 2
  </Box>
  <Box boxShadow="subtle" p="md" gridRow="2/4">
    c 3
  </Box>
  <Box boxShadow="subtle" p="md">
    c 4
  </Box>
  <Box boxShadow="subtle" p="md">
    c 5
  </Box>
</GridLayout>