Layout

ColGrid

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

   

Import ColGrid components

Tremor exports two components for to create a ColGrid.

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

Anatomy

How the basic component is pieced together displaying all properties with their default values. Note, that one does not necessarily need a Col component as the child element of a ColGrid, if they do not require to change the width of the column in the Grid, i.e. the numColSpan.

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

export default () => (
    <ColGrid
      numCols={1}
      numColsSm={}
      numColsMd={}
      numColsLg={}
      gapX="gap-x-0"
      gapY="gap-y-0"
      marginTop="mt-0"
      >
        <Col
          numColSpan={ 1 }
          numColSpanSm={}
          numColSpanMd={}
          numColSpanLg={}
        >
        </Col>
    </ColGrid>
);

Usage example

The example below shows how a ColGrid 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 { ColGrid, Col, Card, Text, Metric } from "@tremor/react";

export default () => (
    <ColGrid numCols={1} numColsSm={2} numColsLg={3} gapX="gap-x-2" gapY="gap-y-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>
    </ColGrid>
);

API Reference: ColGrid

API Reference: Col