SaaS Grid

Responsive grid layout

SaaSLayout

Overview

The Grid component provides a CSS grid wrapper with props for column count, gap spacing, item alignment, and responsive overrides. It simplifies building multi-column layouts with consistent spacing.

Usage

import { Grid } from "@leanicon/web-builder-library/saas";

<Grid cols={3} gap={4}>
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
</Grid>;

Variants

Default

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6

Two Columns

Feature A
Feature B
Feature C
Feature D

Responsive

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Dark

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6

Props

NameTypeDefaultRequiredDescription
responsivestring—NoResponsive columns configuration. Use Tailwind classes like "md:grid-cols-2 lg:grid-cols-3"
align"center" | "start" | "end" | "stretch" | null—No
cols1 | 3 | 5 | 7 | 4 | 2 | 6 | 8 | 9 | 12 | 10 | 11 | null—No
gap0 | 1 | 3 | 5 | 4 | 2 | 6 | 8 | 12 | 10 | null—No