Dottiv1.1
← Components

Grid

Component

Flexible grid layout system with responsive breakpoints.

Installation & Usage

Basic Usage
import { Grid } from 'dotti'

<Grid cols={2} responsive={{ md: 3 }} gap="md">
  {/* Grid items */}
</Grid>

Examples

Responsive Grid

Grid that adapts to screen size.

Item 1

Item 2

Item 3

Item 4

Code
<Grid cols={2} responsive={{ md: 3, lg: 4 }} gap="md">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
  <Card>Item 4</Card>
</Grid>

Props