# CellNode

Một ô (column) trong `GridNode`. Hỗ trợ `colSpan` để chiếm nhiều cột. Là canvas node — chứa bất kỳ node con nào.

## Resolved name

`Cell`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `colSpan` | `number` | Số cột mà cell chiếm (`grid-column: span colSpan`) |
| `hidden` | `boolean` | Ẩn node ở breakpoint `xs` (mặc định). Hỗ trợ responsive qua `sm`, `md`, `lg` |

`colSpan` và `hidden` hỗ trợ responsive: `colSpan={1}` cho mobile, `md={{ colSpan: 2 }}` cho desktop. `hidden={true}` ẩn trên mobile, `md={{ hidden: false }}` hiện lại trên desktop.

### `sx` props

```ts
sx?: {
  // size
  height?: number | string

  // order (thứ tự hiển thị trong grid)
  order?: 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';

// Cell mặc định (1 cột)
<GridNode cols={3}>
  <CellNode>Content A</CellNode>
  <CellNode>Content B</CellNode>
  <CellNode>Content C</CellNode>
</GridNode>

// colSpan: cell chiếm 2/3 cột, cell còn lại chiếm 1/3
<GridNode cols={3}>
  <CellNode colSpan={2}>Wide content</CellNode>
  <CellNode colSpan={1}>Narrow content</CellNode>
</GridNode>

// colSpan responsive: full-width mobile, 2 cột trên desktop
<GridNode cols={1} md={{ cols: 3 }}>
  <CellNode colSpan={1} md={{ colSpan: 2 }}>
    Wide on desktop
  </CellNode>
  <CellNode colSpan={1}>
    Normal
  </CellNode>
</GridNode>

// sx responsive
<CellNode
  colSpan={1}
  sx={{
    paddingTop: 12,
    paddingBottom: 12,
    backgroundColor: '#fff',
    md: {
      paddingTop: 24,
      paddingBottom: 24,
    },
  }}
>
  ...
</CellNode>
```

## Rules

- **Canvas**: yes — chứa bất kỳ node con nào.
- **Parent**: phải là `GridNode`.

## Related nodes

- [`GridNode`](../grid/README.md) — parent bắt buộc của `CellNode`