Layout

Grid

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

   

Import Grid components

Tremor exports two components for to create a Grid.

import { Grid, Col } from "@tremor/react";

Usage example

The example below shows how a Grid can be used to display Kpi Cards in a grid layout. Note that the number of columns (numCols) as well as the number of columns a single column should span over (numColSpan) can be set for each viewport.

import { Grid, Col, Card, Text, Metric } from "@tremor/react";

export default () => (
    <Grid numCols={1} numColsSm={2} numColsLg={3} className="gap-2">
        <Col numColSpan={1} numColSpanLg={2}>
            <Card>
              <Text>Title</Text>
              <Metric>KPI 1</Metric>
            </Card>
        </Col>
        <Card>
          <Text>Title</Text>
          <Metric>KPI 2</Metric>
        </Card>
        <Col>
            <Card>
              <Text>Title</Text>
              <Metric>KPI 3</Metric>
            </Card>
        </Col>
        <Card>
          <Text>Title</Text>
          <Metric>KPI 4</Metric>
        </Card>
        <Card>
          <Text>Title</Text>
          <Metric>KPI 5</Metric>
        </Card>
    </Grid>
);

API Reference: Grid

API Reference: Col