SectionGrid
A grid layout component for arranging sections on a page.
SectionGrid is a layout component that wraps your Section components and arranges them into columns. It should be the direct child of MainLayout on every page.
import { SectionGrid } from "@/components/section-grid";
import { Section } from "@/components/section";
<SectionGrid columns={2}>
<Section title="Left Section">{/* fields */}</Section>
<Section title="Right Section">{/* fields */}</Section>
</SectionGrid>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Section components to render |
columns | 1 | 2 | 3 | 4 | 1 | Number of columns to arrange sections into |
Notes
- Sections flow into columns automatically using CSS columns, so they fill top to bottom before moving to the next column.
- Sections will never break across column boundaries mid-render.
- Most pages use
columns={1}unless you have a lot of sections that make sense side by side.