# useFormLayout

URL: https://docs.forms.saastro.io/docs/use-form-layout
> Converts FormLayout config into CSS grid classes and inline styles.

# useFormLayout

Converts a `FormLayout` configuration object into a CSS class string and optional inline style for the form grid container.

> **You probably don't need this directly.** The `<Form />` component calls it internally. Use it when building a custom form container that needs the same grid layout.

---

## Signature

```tsx

const { gridClassName, gridStyle } = useFormLayout(layout);
```

---

## Parameters

| Parameter | Type         | Required | Description                               |
| --------- | ------------ | -------- | ----------------------------------------- |
| `layout`  | `FormLayout` | No       | Layout configuration from `config.layout` |

---

## Return Value

| Property        | Type            | Description                                                                                |
| --------------- | --------------- | ------------------------------------------------------------------------------------------ |
| `gridClassName` | `string`        | Tailwind CSS classes for the grid container (e.g. `'grid gap-4 grid-cols-12'`)             |
| `gridStyle`     | `CSSProperties` | Inline styles — carries `gridTemplateColumns` in auto mode; empty object in manual mode    |

---

## How It Works

This is a thin wrapper around `getFormGridClass(layout)`:

- **Manual mode**: Generates `grid gap-{gap} grid-cols-{columns}` classes (columns 1–12, default 1; gap 0–12, default 4 — a gap of `0` omits the gap class)
- **Auto mode**: `gridClassName` is just `grid gap-{gap}`; the column sizing comes from an inline `grid-template-columns: repeat(auto-fit, minmax({minFieldWidth/16}rem, 1fr))` style (`minFieldWidth` defaults to 240px → 15rem). If `columns` is also set, the minimum width is clamped with `max(...)` and a `calc()` expression so the grid never exceeds that many columns.
- Falls back to `grid grid-cols-1 gap-4` when `layout` is undefined

---

## Example

```tsx

function CustomFormGrid({ config, children }) {
  const { gridClassName, gridStyle } = useFormLayout(config.layout);

  return (
    <div className={gridClassName} style={gridStyle}>
      {children}
    </div>
  );
}
```

---

## Related

- [Layout System](/docs/layout) — Full guide on manual vs auto layout modes