SimpleGrid

SimpleGrid is a lightweight, responsive grid for evenly spaced items across a fixed number of columns.

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>
    Item 1
  </No Display Name>
  <No Display Name>
    Item 2
  </No Display Name>
  <No Display Name>
    Item 3
  </No Display Name>
  <No Display Name>
    Item 4
  </No Display Name>
  <No Display Name>
    Item 5
  </No Display Name>
  <No Display Name>
    Item 6
  </No Display Name>
</HvSimpleGrid>

<HvSimpleGrid 
  cols={2}
  spacing="sm"
>
  <No Display Name>
    Item 1
  </No Display Name>
  <No Display Name>
    Item 2
  </No Display Name>
  <No Display Name>
    Item 3
  </No Display Name>
  <No Display Name>
    Item 4
  </No Display Name>
  <No Display Name>
    Item 5
  </No Display Name>
  <No Display Name>
    Item 6
  </No Display Name>
</HvSimpleGrid>

Breakpoints

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