# GridNode

A CSS Grid container node. Accepts only `CellNode` children — the editor enforces this via `canMoveIn`.

## Resolved name

`Grid`

## Configurable props

Props mà user có thể chỉnh trong editor inspector.

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `cols` | `number` | Số cột — generates `grid-template-columns: repeat(cols, minmax(0, 1fr))` |
| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |
| `sm` | `{ cols?: number, hidden?: boolean }` | Override tại breakpoint sm |
| `md` | `{ cols?: number, hidden?: boolean }` | Override tại breakpoint md |
| `lg` | `{ cols?: number, hidden?: boolean }` | Override tại breakpoint lg |

### `sx` props

`sx` nhận `StyledCSS` với responsive keys `sm`, `md`, `lg` bên trong:

```ts
sx?: {
  // layout
  columnGap?: number
  rowGap?: number
  alignItems?: 'start' | 'center' | 'end' | 'stretch'
  justifyItems?: 'start' | 'center' | 'end' | 'stretch'
  width?: number | string
  height?: number | string

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // background
  backgroundColor?: string
  backgroundImage?: string
  backgroundPosition?: string
  backgroundRepeat?: string
  backgroundSize?: string
  backgroundAttachment?: string
  background?: string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { GridNode, CellNode } from '@janbox/storefront-builder';

// 2 cột cố định
<GridNode cols={2}>
  <CellNode>...</CellNode>
  <CellNode>...</CellNode>
</GridNode>

// Responsive: 1 cột mobile, 3 cột desktop
<GridNode cols={1} md={{ cols: 3 }}>
  <CellNode>...</CellNode>
  <CellNode>...</CellNode>
  <CellNode>...</CellNode>
</GridNode>

// sx responsive: gap nhỏ trên mobile, lớn hơn trên desktop
<GridNode
  cols={1}
  md={{ cols: 2 }}
  sx={{
    columnGap: 8,
    rowGap: 8,
    paddingTop: 16,
    paddingBottom: 16,
    md: {
      columnGap: 24,
      rowGap: 24,
      paddingTop: 32,
      paddingBottom: 32,
    },
  }}
>
  <CellNode>...</CellNode>
  <CellNode>...</CellNode>
</GridNode>

// Grid với background
<GridNode
  cols={2}
  sx={{
    backgroundColor: '#f5f5f5',
    paddingTop: 32,
    paddingBottom: 32,
  }}
>
  <CellNode>...</CellNode>
  <CellNode>...</CellNode>
</GridNode>
```

## Rules

- **Canvas**: yes — accepts dropped children.
- **canMoveIn**: only `CellNode` children are allowed.

## Related nodes

- [`CellNode`](../cell/README.md) — the only valid direct child of `GridNode`