ProductFeaturesDocs
Built InUI ComponentsAdmin ConsoleDatabaseBackendStorageAIRAGAuthSecurity
CompanyStoryAboutPricingBlogRoadmap
Install FLIN

Grid

CSS Grid layout with configurable columns and gap. Collapses to single column on mobile.

3-Column Grid (Default)

Default three-column layout for equal-width content distribution.

Col 1
Col 2
Col 3

2-Column

Two-column layout for side-by-side content.

A
B

4-Column

Four-column layout for compact item grids.

1
2
3
4

Card Grid

Dashboard-style card grid with icons and descriptions.

Users

Manage team members

Settings

App configuration

Analytics

View statistics

Usage

<Grid> <div>Col 1</div> <div>Col 2</div> <div>Col 3</div></Grid><Grid cols="2" gap="0.75rem"> <div>A</div> <div>B</div></Grid><Grid cols="4" gap="0.75rem"> <div>1</div> <div>2</div> <div>3</div> <div>4</div></Grid>

Props

PropTypeDefaultDescription
colsstring"3"Number of grid columns
gapstring"1rem"Gap between grid items
childrencontent-Grid items