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

SimpleGrid

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

Source Code

uikit-react-core

Breakpoints

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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

<div className="w-full">
  <HvSimpleGrid
    cols={2}
    breakpoints={[
      { minWidth: 1600, cols: 4, spacing: "md" },
      { minWidth: 1300, cols: 3, spacing: "md" },
      { minWidth: 1100, cols: 2, spacing: "sm" },
      { minWidth: 800, cols: 1, spacing: "sm" },
    ]}
  >
    {[...Array(6).keys()].map((i) => (
      <HvPanel>Item {i + 1}</HvPanel>
    ))}
  </HvSimpleGrid>
</div>

<div className="w-full">
  <HvSimpleGrid
    cols={2}
    breakpoints={[
      { minWidth: 1600, cols: 4, spacing: "md" },
      { minWidth: 1300, cols: 3, spacing: "md" },
      { minWidth: 1100, cols: 2, spacing: "sm" },
      { minWidth: 800, cols: 1, spacing: "sm" },
    ]}
  >
    {[...Array(6).keys()].map((i) => (
      <HvPanel>Item {i + 1}</HvPanel>
    ))}
  </HvSimpleGrid>
</div>

HvGrid

SimpleGrid

Breakpoints

Related components