Grid

<Grid columns={{ xs: '2' }} gap="2">
  <Card size="3">
    <Flex gap="4">
      <Box display={{ initial: 'none', md: 'block' }}>
        <FeatureIcon feature="sso" size="1" />
      </Box>
      <Box>
        <Heading as="h2" size="4">
          Single Sign-On
        </Heading>
        <Text as="p">Integrate with any IdP</Text>
      </Box>
    </Flex>
  </Card>
  <Card size="3">
    <Flex gap="4">
      <Box display={{ initial: 'none', md: 'block' }}>
        <FeatureIcon feature="directory-sync" size="1" />
      </Box>
      <Box>
        <Heading as="h2" size="4">
          Directory Sync
        </Heading>
        <Text as="p">Manage user directories</Text>
      </Box>
    </Flex>
  </Card>
</Grid>

<Grid flow="column" gap="3" width="max-content">
  <Code>ADFSSAML</Code>
  <Code>ADPOIDC</Code>
  <Code>Auth0SAML</Code>
  <Code>AzureSAML</Code>
  <Code>CASSAML</Code>
  <Code>ClassLinkSAML</Code>
  <Code>CyberArkSAML</Code>
  <Code>DuoSAML</Code>
  <Code>GenericOIDC</Code>
  <Code>DuoSAML</Code>
  <Code>GenericSAML</Code>
  <Code>GoogleOAuth</Code>
  <Code>GoogleSAML</Code>
</Grid>

<Grid
  gap="5"
  justify="center"
  style={{ gridTemplateColumns: 'repeat(4, auto)' }}
>
  <BorderWidthIcon />
  <BorderStyleIcon />
  <BorderDashedIcon />
  <BorderDottedIcon />
  <BorderSolidIcon />
  <BorderNoneIcon />
  <BorderAllIcon />
  <BorderSplitIcon />
  <BorderBottomIcon />
  <BorderLeftIcon />
  <BorderTopIcon />
  <BorderRightIcon />
</Grid>

<Grid columns="4" gap={{ initial: '3', md: '5' }} width="max-content">
  <BorderWidthIcon />
  <BorderStyleIcon />
  <BorderDashedIcon />
  <BorderDottedIcon />
  <BorderSolidIcon />
  <BorderNoneIcon />
  <BorderAllIcon />
  <BorderSplitIcon />
  <BorderBottomIcon />
  <BorderLeftIcon />
  <BorderTopIcon />
  <BorderRightIcon />
</Grid>