NewsKit Mobile Logo

Grid & Cell

Overview

Usage

The Grid and Cell components are used together to construct a visual grid for responsive page layout. The Grid containers children must be Cell components, which can span different widths at each of the 5 breakpoints.

The 5 breakpoints (xs, sm, md, lg, xl) widths are set via the theme, as are the grid settings. The NewsKit light default grid settings are as follows:

SettingDefault ValueExplanation
maxWidth1920The maximum width of the Grid container component. The Grid will not grow bigger than 1920px wide.
containerMargin16, 16, 24, 24The margin either side of the Grid container component. The margin can be different for each breakpoint. By default it is 16px for xs & sm, and 24px for lg & xl.
columnGutters16, 16, 24, 24The spacing between each Cell component column (i.e. left and right). The margin can be different for each breakpoint. By default it is 16px for xs & sm, and 24px for lg & xl.
rowGutters16, 16, 24, 24The spacing between each Cell component row (i.e. top and bottom when Cells are wrapped). The margin can be different for each breakpoint. By default it is 16px for xs & sm, and 24px for lg & xl.
columns12The total columns available to use. Each Cell by default takes up 1 column. If there are more Cells in a Grid than columns, or the Cell components inside a Grid span a total greater than 12, they will wrap.

Grid Props

childrenCell
The Cell components must be used as children of the Grid. Using anything other than the Cell components will break the Grid functionality.
xsMarginstring
An override for the grid margin sizing at the xs and upwards breakpoint.
smMarginstring
An override for the grid margin sizing at the sm and upwards breakpoint.
mdMarginstring
An override for the grid margin sizing at the md and upwards breakpoint.
lgMarginstring
An override for the grid margin sizing at the lg and upwards breakpoint.
xlMarginstring
An override for the grid margin sizing at the xl breakpoint.
xsColumnGutterstring
An override for the column gutter sizing at the xs and upwards breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
smColumnGutterstring
An override for the column gutter sizing at the sm and upwards breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
mdColumnGutterstring
An override for the column gutter sizing at the md and upwards breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
lgColumnGutterstring
An override for the column gutter sizing at the lg and upwards breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
xlColumnGutterstring
An override for the column gutter sizing at the xl breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
xsRowGutterstring
An override for the row gutter sizing at the xs and upwards breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
smRowGutterstring
An override for the row gutter sizing at the sm and upwards breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
mdRowGutterstring
An override for the row gutter sizing at the md and upwards breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
lgRowGutterstring
An override for the row gutter sizing at the lg and upwards breakpoint. This applies to all direct children cells, but not the cells in further nested grids.
xlRowGutterstring
An override for the row gutter sizing at the xl breakpoint. This applies to all direct children cells, but not the cells in further nested grids.

Cell Props

childrenReact.ReactNode
The children of a column are rendered in that column, any supported React node is allowed.
xsnumber = 1
The amount of columns for Cell to span at the xs and upwards breakpoint.
smnumber = 1
The amount of columns for Cell to span at the sm and upwards breakpoint.
mdnumber = 1
The amount of columns for Cell to span at the md and upwards breakpoint.
lgnumber = 1
The amount of columns for Cell to span at the lg and upwards breakpoint.
xlnumber = 1
The amount of columns for Cell to span at the xl breakpoint.
xsHiddenboolean = false
If true, the Cell will be hidden at the xs breakpoint. Unlike other breakpoint props this has no effect on other breakpoints.
smHiddenboolean = false
If true, the Cell will be hidden at the sm breakpoint. Unlike other breakpoint props this has no effect on other breakpoints.
mdHiddenboolean = false
If true, the Cell will be hidden at the md breakpoint. Unlike other breakpoint props this has no effect on other breakpoints.
lgHiddenboolean = false
If true, the Cell will be hidden at the lg breakpoint. Unlike other breakpoint props this has no effect on other breakpoints.
xlHiddenboolean = false
If true, the Cell will be hidden at the lg breakpoint. Unlike other breakpoint props this has no effect on other breakpoints.
xsOrdernumber
If set, this is the flex order number than will be applied at the xs and upwards breakpoint.
smOrdernumber
If set, this is the flex order number than will be applied at the sm and upwards breakpoint.
mdOrdernumber
If set, this is the flex order number than will be applied at the md and upwards breakpoint.
lgOrdernumber
If set, this is the flex order number than will be applied at the lg and upwards breakpoint.
xlOrdernumber
If set, this is the flex order number than will be applied at the xl breakpoint.
xsOffsetnumber
If set, specifies the amount of columns the cell will be offset by at the xs and larger breakpoints.
smOffsetnumber
If set, specifies the amount of columns the cell will be offset by at the sm and larger breakpoints.
mdOffsetnumber
If set, specifies the amount of columns the cell will be offset by at the md and larger breakpoints.
lgOffsetnumber
If set, specifies the amount of columns the cell will be offset by at the lg and larger breakpoints.
xlOffsetnumber
If set, specifies the amount of columns the cell will be offset by at the xl breakpoint.