Grid

Grid provides a friendly interface to create responsive grid layouts with ease.

Demo

React

Grid Root Props:templateColumns="repeat(2, 1fr)" gap="1rem"

Row 1
Column 1

Row 1
Column 2

Row 2
Column 1

Row 2
Column 2

Grid Root Props:templateColumns="1fr 2fr 1fr" gap="2rem"

Column

Column

Column

Grid Root Props:templateColumns="repeat(4, 1fr)" gap="1rem"

Single column

Spans 3 columns

Spans 2 columns

Single column

Single column

Vue

Grid Root Props: template-columns="repeat(2, 1fr)" gap="1rem"

Row 1
Column 1

Row 1
Column 2

Row 2
Column 1

Row 2
Column 2

Grid Root Props: template-columns="1fr 2fr 1fr" gap="2rem"

Column

Column

Column

Grid Root Props: template-columns="repeat(4, 1fr)" gap="1rem"

Single column

Spans 3 columns

Spans 2 columns

Single column

Single column

Usage

React

import { Grid } from '@fintech-sandpit/ui/react';

return (
  <Grid.Root
    templateColumns="repeat(2, 1fr)"
    gap="1rem"
  >
    <Grid.Cell>
      Row 1 / Column 1
    </Grid.Cell>

    <Grid.Cell>
      Row 1 / Column 2
    </Grid.Cell>

    <Grid.Cell>
      Row 2 / Column 1
    </Grid.Cell>

    <Grid.Cell>
      Row 2 / Column 2
    </Grid.Cell>
  </Grid.Root>
);

Vue

<template>
  <Grid.Root
    template-columns="repeat(2, 1fr)"
    gap="1rem"
  >
    <Grid.Cell>
      Row 1 / Column 1
    </Grid.Cell>

    <Grid.Cell>
      Row 1 / Column 2
    </Grid.Cell>

    <Grid.Cell>
      Row 2 / Column 1
    </Grid.Cell>

    <Grid.Cell>
      Row 2 / Column 2
    </Grid.Cell>
  </Grid.Root>
</template>

<script setup lang="ts">
import { Grid } from '@fintech-sandpit/ui/vue';
</script>

Examples

Basic grid

React

import { Grid } from '@fintech-sandpit/ui/react';

return (
  <Grid.Root
    templateColumns="repeat(3, 1fr)"
    gap="1rem"
  >
    <Grid.Cell>
      Item 1
    </Grid.Cell>

    <Grid.Cell>
      Item 2
    </Grid.Cell>

    <Grid.Cell>
      Item 3
    </Grid.Cell>
  </Grid.Root>
);

Vue

<script setup lang="ts">
import { Grid } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Grid.Root
    template-columns="repeat(3, 1fr)"
    gap="1rem"
  >
    <Grid.Cell>
      Item 1
    </Grid.Cell>

    <Grid.Cell>
      Item 2
    </Grid.Cell>

    <Grid.Cell>
      Item 3
    </Grid.Cell>
  </Grid.Root>
</template>

Grid with spanning items

React

import { Grid } from '@fintech-sandpit/ui/react';

return (
  <Grid.Root
    templateColumns="repeat(4, 1fr)"
    gap="1rem"
  >
    <Grid.Cell>
      Single column
    </Grid.Cell>

    <Grid.Cell colSpan={3}>
      Spans 3 columns
    </Grid.Cell>

    <Grid.Cell colSpan={2}>
      Spans 2 columns
    </Grid.Cell>

    <Grid.Cell>
      Single column
    </Grid.Cell>

    <Grid.Cell>
      Single column
    </Grid.Cell>
  </Grid.Root>
);

Vue

<script setup lang="ts">
import { Grid } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Grid.Root
    template-columns="repeat(4, 1fr)"
    gap="1rem"
  >
  <Grid.Cell>
    Single column
  </Grid.Cell>

  <Grid.Cell :col-span="3">
    Spans 3 columns
  </Grid.Cell>

  <Grid.Cell :col-span="2">
    Spans 2 columns
  </Grid.Cell>

  <Grid.Cell>
    Single column
  </Grid.Cell>

  <Grid.Cell>
    Single column
  </Grid.Cell>
  </Grid.Root>
</template>

Props

Grid Root Props

React

Name	Type	Required	Default	Description
templateColumns	string		—	Defines the columns of the grid 1
templateRows	string		—	Defines the rows of the grid 2
autoFlow	GridAutoFlow		'row'	Direction of auto-placed items 3
columns	number		—	Number of columns in the grid 4
rows	number		—	Number of rows in the grid 5
gap	CssUnit		—	Gap between grid items

Vue

Name	Type	Required	Default	Description
template-columns	string		—	Defines the columns of the grid 1
template-rows	string		—	Defines the rows of the grid 2
auto-flow	GridAutoFlow		'row'	Direction of auto-placed items 3
columns	number		—	Number of columns in the grid 4
rows	number		—	Number of rows in the grid 5
gap	CssUnit		—	Gap between grid items

1. See the MDN docs
2. See the MDN docs
3. See the MDN docs
4. Use instead of templateColumns when you want to use a fixed number of columns
5. Use instead of templateRows when you want to use a fixed number of rows

Grid Item Props

React

Name	Type	Required	Default	Description
colSpan	number		—	Number of columns the item should span 1
rowSpan	number		—	Number of rows the item should span 1
asChild	boolean		false	Whether to render the item as a child component

Vue

Name	Type	Required	Default	Description
col-span	number		—	Number of columns the item should span 1
row-span	number		—	Number of rows the item should span 1
as-child	boolean		false	Whether to render the item as a child component

1. Non-numerical values, and values less than 1 are ignored

Types

type CssUnit = `${number}${'em' | 'px' | 'rem' | 'vh' | 'vw' | '%'}`
type GridAutoFlow = 'row' | 'column' | 'dense' | 'row dense' | 'column dense'