Skip to main content
ninna-ui

SimpleGrid

A responsive grid that automatically adjusts columns based on available space or a fixed column count.

import { SimpleGrid } from "@ninna-ui/layout"
pnpm add @ninna-ui/layout

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the SimpleGrid component.

import { SimpleGrid } from "@ninna-ui/layout";


export default function Example() {
  return (
    <SimpleGrid columns={3} gap="4">
      <Card />
      <Card />
      <Card />
    </SimpleGrid>
  );
}

Basic

Fixed column grid layout.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

Columns

Control the number of columns.

columns=1

1
2

columns=2

1
2
3
4

columns=3

1
2
3
4
5
6

columns=4

1
2
3
4
5
6
7
8

Min Child Width

Auto-responsive grid based on minimum child width.

minChildWidth="150px"

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8

minChildWidth="200px"

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

Gap Spacing

Control spacing between grid items.

gap="0"

1
2
3
4
5
6

gap="2"

1
2
3
4
5
6

gap="4"

1
2
3
4
5
6

gap="6"

1
2
3
4
5
6

Use Cases

Common patterns using SimpleGrid.

Product Grid

Product 1

$99.00

Product 2

$99.00

Product 3

$99.00

Product 4

$99.00

Feature Grid

🚀

Fast

Lightning quick

🔒

Secure

Enterprise grade

📱

Responsive

Works everywhere

Stats Grid

10K+

Users

99.9%

Uptime

50+

Countries

24/7

Support

API Reference

Complete list of props.

Props

PropTypeDefaultDescription
columnsnumber1Fixed number of columns (uses inline style — mutually exclusive with minChildWidth)
minChildWidthstring-Minimum child width for auto-fit responsive columns (e.g., '200px'). Uses inline style — dynamic values cannot be statically extracted by Tailwind JIT.
gap'0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16''4'Gap between items (uses Tailwind gap-* classes)
classNamestring-Additional CSS classes

Accessibility

  • SimpleGrid is a pure layout component with no semantic meaning
  • Automatically adjusts columns based on available space
  • Use appropriate semantic HTML elements as children