RebassGetting StartedPropsGrid SystemThemingExtendingServer Side RenderingColors
AbsoluteArrowAvatarBackgroundImageBadgeBannerBlockLinkBlockquoteBorderBoxButtonButtonCircleButtonOutlineButtonTransparentCapsCardCarouselCheckboxCircleCloseCodeColumnContainerDividerDonutDotDrawerEmbedFixedFlexGroupHeadingHideImageInputLabelLeadLinkMeasureMessageModalNavLinkPanelPositionPreProgressRadioRelativeRowSampSelectSliderSmallStickySubheadSwitchTabTabsTextTextareaToolbarTooltipTruncate
GitHubMade by Jxnblk

Grid System

Rebass includes the incredibly flexible, responsive flexbox grid system Rebass Grid. Use the <Flex /> and <Box /> components to fine tune spacing and alignment in a variety of combination.

Half
Half
<Flex mx={-2}>
  <Box width={1/2} px={2}>
    <Text p={1} color='white' bg='blue'>
      Half
    </Text>
  </Box>
  <Box width={1/2} px={2}>
    <Text p={1} color='white' bg='blue'>
      Half
    </Text>
  </Box>
</Flex>
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
<Flex flexWrap='wrap' mx={-2}>
  <Box px={2} py={2} width={1/2}>
    <Text p={1} color='white' bg='blue'>
      1/2
    </Text>
  </Box>
  <Box px={2} py={2} width={1/2}>
    <Text p={1} color='white' bg='blue'>
      1/2
    </Text>
  </Box>
  <Box px={2} py={2} width={1/3}>
    <Text p={1} color='white' bg='blue'>
      1/3
    </Text>
  </Box>
  <Box px={2} py={2} width={1/3}>
    <Text p={1} color='white' bg='blue'>
      1/3
    </Text>
  </Box>
  <Box px={2} py={2} width={1/3}>
    <Text p={1} color='white' bg='blue'>
      1/3
    </Text>
  </Box>
  <Box px={2} py={2} width={1/4}>
    <Text p={1} color='white' bg='blue'>
      1/4
    </Text>
  </Box>
  <Box px={2} py={2} width={1/4}>
    <Text p={1} color='white' bg='blue'>
      1/4
    </Text>
  </Box>
  <Box px={2} py={2} width={1/4}>
    <Text p={1} color='white' bg='blue'>
      1/4
    </Text>
  </Box>
  <Box px={2} py={2} width={1/4}>
    <Text p={1} color='white' bg='blue'>
      1/4
    </Text>
  </Box>
</Flex>

Hello

Grid
<Flex alignItems='center'>
  <Box width={1/3}>
    <Heading
      py={4}
      fontSize={[ 5, 6 ]}
      color='white'
      bg='blue'>
      Hello
    </Heading>
  </Box>
  <Box width={1/3} ml='auto'>
    <Text>Grid</Text>
  </Box>
</Flex>

See the Rebass Grid documentation for more.

Props
Theming