Grid

The Vivakit Grid is used for building layout using the css grid system. It is customizable and has responsive breakpoints.

Import

import { VKGrid, VKGridItem } from "@vivakits/react-components";

Basic usage

We can define grid row and column size using the rows and columns prop. Here, column size xs means in each column there will be one item, whereas 2xl is equivalent to 12 columns. On the other hand, rows xs means there will be one row, whereas 2xl is equivalent to 6 rows.

Align

We can specify vertical alignment of each grid items using align prop.

Justify

We can specify horizontal alignment of each grid items using justify prop.

Gap

We can specify gap between each items using the gap prop. We can pass sm, md, lg, xl. Besides we can also pass any number for specific gap size. There is also breakpoint support in grid gap property. So, for each breakpoint specified the gap will be visible accordingly.

Grid Flow

If you want to fit as many possible columns as possible on a row you can use the gridFlow prop. It has two variants, col and row.

API Reference

Grid

GridItem