Grid

Grid UI Component

Installation

npm i @synerise/ds-grid
or
yarn add @synerise/ds-grid

Usage

import Grid from '@synerise/ds-grid'
<Grid>
<Grid.Item xxl={12} xl={8} lg={6} md={4} sm={4} xs={3}>
<Card>...</Card>
</Grid>
<Grid.Item xxl={12} xl={8} lg={6} md={4} sm={4} xs={3}>
<Card>...</Card>
</Grid>
<Grid.Item xxl={12} xl={8} lg={6} md={4} sm={4} xs={3}>
<Card>...</Card>
</Grid>
</Grid>

Demo

API

Grid

PropertyDescriptionTypeDefault
gutterSpacing between grids (px)number24

Grid.Item

PropertyDescriptionTypeDefault
xxlscreen > 1600, number of cells to occupy, 0 corresponds to display: none, max value: 24number-
xlscreen > 1280, number of cells to occupy, 0 corresponds to display: none, max value: 16number-
lgscreen > 960, number of cells to occupy, 0 corresponds to display: none, max value: 12number-
mdscreen > 768, number of cells to occupy, 0 corresponds to display: none, max value: 8number-
smscreen > 320, number of cells to occupy, 0 corresponds to display: none, max value: 8number-
xsscreen <= 320, number of cells to occupy, 0 corresponds to display: none, max value: 3number-
contentWrapperGroup content with max size (defined in col size props) and center them horizontallyboolean-