SimpleGrid

Source Code

uikit-react-core

Please check the HvGrid component documentation for more advanced grid configurations.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

cols

spacing

<HvSimpleGrid 
  cols={2}
  spacing="sm"
>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 1
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 2
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 3
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 4
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 5
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 6
    </d>
  </No Display Name>
</HvSimpleGrid>

<HvSimpleGrid 
  cols={2}
  spacing="sm"
>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 1
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 2
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 3
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 4
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 5
    </d>
  </No Display Name>
  <No Display Name bgcolor="atmo2">
    <d className="flex items-center justify-center">
      Item 6
    </d>
  </No Display Name>
</HvSimpleGrid>

Breakpoints

Use the breakpoints prop to define the number of columns and spacing for different widths.