# GridProvider

Provides CSS custom properties for responsive grid column calculations. Children can use `$column-width` for precise column sizing.

## When to Use

- Responsive grid layouts with consistent column sizing
- Layouts that need to calculate column widths based on container size
- Grid systems with configurable column counts

## Properties

- **`columns`** `number` (default: `2`) — Number of grid columns
- **`gap`** `Styles['gap']` (default: `'0'`) — Gap between columns
- **`width`** `Styles['width']` — Forced container width (bypasses auto-detection)
- **`initialWidth`** `Styles['width']` — Initial width before resize observer kicks in

### CSS Custom Properties Provided

- `--grid-width` — Total grid width
- `--columns-amount` — Number of columns
- `--column-gap` — Gap between columns
- `--column-width` — Calculated width per column

### Base Properties

Supports [Base properties](../BaseProperties.md).

### Style Defaults

- `display` — `contents`

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

```jsx
<GridProvider columns={12} gap="1x">
  <Grid columns="repeat(12, $column-width)">
    <Block gridColumn="span 6">Half</Block>
    <Block gridColumn="span 6">Half</Block>
  </Grid>
</GridProvider>
```
