GitHub

Grid

Creates a grid layout to align components as equally sized columns.

Title

KPI 1

Title

KPI 2

Title

KPI 3

Title

KPI 4

Title

KPI 5

Installation

npx solidui-cli@latest add grid

Usage

import { Col, Grid } from "~/components/ui/grid"
<Grid cols={1} colsMd={2} class="w-full gap-2">
  <Col span={1} spanMd={2}>
    <Card>
      <CardHeader>
        <CardTitle>Title</CardTitle>
      </CardHeader>
      <CardContent>KPI 1</CardContent>
    </Card>
  </Col>
  <Card>
    <CardHeader>
      <CardTitle>Title</CardTitle>
    </CardHeader>
    <CardContent>KPI 2</CardContent>
  </Card>
  <Card>
    <CardHeader>
      <CardTitle>Title</CardTitle>
    </CardHeader>
    <CardContent>KPI 3</CardContent>
  </Card>
</Grid>