Import
import { GridView } from "@sugarcoat/ui-nxt";Usage
<GridView columns={3} gap={4}>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</GridView>Basic Usage#
A simple grid layout with equal columns.
Basic Grid
Columns#
Define the number of columns from 1 to 12.
2 Columns
4 Columns
6 Columns
Responsive Columns#
Use small, medium, or large presets for auto-fit responsive grids.
Small (min 200px)
Medium (min 300px)
Large (min 400px)
Rows#
Define the number of rows for explicit grid layouts.
Explicit Rows
Gap#
Control spacing between items with gap values from 0 to 20.
Gap 2
Gap 6
Gap 10
Separate Gap X and Gap Y#
Control horizontal and vertical spacing independently.
Different X/Y Gap
Align Items#
Control vertical alignment of grid items.
Items Start
Items Center
Items Stretch
Grid Flow#
Control how auto-placed items flow in the grid.
Flow Row
Flow Dense
Common Patterns#
Card Grid#
Feature Cards
Dashboard Layout#
Dashboard
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | 1-12 | "small" | "medium" | "large" | - | Number of columns or responsive preset |
| rows | 1-12 | "small" | "medium" | "large" | - | Number of rows or responsive preset |
| gap | 0-20 | - | Gap between all items |
| gapX | 0-20 | - | Horizontal gap between items |
| gapY | 0-20 | - | Vertical gap between items |
| items | "start" | "center" | "end" | "baseline" | "stretch" | "start" | Align items vertically |
| justify | "start" | "center" | "end" | "between" | "around" | "evenly" | - | Justify content horizontally |
| flow | "row" | "column" | "dense" | "row-dense" | "column-dense" | - | Grid auto flow direction |
| css | SystemStyleObject | - | Additional Panda CSS styles |
Column Presets#
| Preset | Behavior |
|---|---|
small | repeat(auto-fit, minmax(200px, 1fr)) |
medium | repeat(auto-fit, minmax(300px, 1fr)) |
large | repeat(auto-fit, minmax(400px, 1fr)) |