Grid

Responsive grid layout with container query support.

1
2
3
4
5
6
7
8
9
10
11
12
import { Grid } from "ui-lab-components";
 
export function Example() {
  return (
    <Grid columns={3} gap="md">
      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">1</div>
      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">2</div>
      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">3</div>
      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">4</div>
      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">5</div>
      <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">6</div>
    </Grid>
  );
}

Basic Grid

A simple grid layout with multiple cells. Use this for organizing content in a responsive grid structure.

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
import React from 'react';
import { Grid } from 'ui-lab-components';
 
export default function Example() {
  return (
    <Grid columns={3} gap="md">
      <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>
      <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>
      <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>
      <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>
      <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>
      <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>
    </Grid>
  );
}
UI Lab