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

import { useFormLayout } from '@saastro/forms';

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

Parameters

Return Value

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

import { useFormLayout } from '@saastro/forms';

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

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

Related

• Layout System — Full guide on manual vs auto layout modes