1. Layout
  2. ColGrid

Layout

ColGrid

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

Cards aligned in a ColGrid

   

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.

Title

KPI 1

Title

KPI 2

Title

KPI 3

Title

KPI 4

Title

KPI 5

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

numColsoptional
Description
Set how how many columns the grid should have.
Type
number
Default
1
Values
numColsSmoptional
Description
Set how how many columns the grid should have, starting from the sm screen size.
Type
number
Default
1
Values
numColsMdoptional
Description
Set how how many columns the grid should have, starting from the md screen size.
Type
number
Default
1
Values
numColsLgoptional
Description
Set how how many columns the grid should have, starting from the lg screen size.
Type
number
Default
1
Values
GapXoptional
Description
Control the horizontal gap between grid items
Type
string
Default
gap-x-0
GapYoptional
Description
Control the horizontal gap between grid items
Type
string
Default
gap-y-0
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: Col

numColSpanoptional
Description
Control to make an element span over n columns
Type
number
Default
1
Values
numColsSmoptional
Description
Control to make an element span over n columns, starting from the sm screen size
Type
number
Default
Values
numColsMdoptional
Description
Control to make an element span over n rows, starting from the md screen size
Type
number
Default
Values
numColsLgoptional
Description
Control to make an element span over n rows, starting from the lg screen size
Type
number
Default
Values