Grid

A 24-column responsive layout system.

When to use

Use Row and Col when content requires responsive spans, offsets, ordering, gutters, or breakpoint-aware layout.

Examples

Basic Grid

From the stack to the horizontal arrangement. You can create a basic grid system by using a single set of Row and Col grid assembly, all of the columns (Col) must be placed in Row.

Grid Gutter

You can use the gutter property of Row as grid spacing, we recommend set it to (16 + 8n) px (n stands for natural number). You can set it to a object like { xs: 8, sm: 16, md: 24, lg: 32 } for responsive design. You can use an array to set vertical spacing, [horizontal, vertical] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]. You can set gutter to a string CSS units, for example: px, rem, vw, vh etc. vertical gutter was supported after 3.24.0. string type was supported after 5.28.0.

Column offset

offset can set the column to the right side. For example, using offset = {4} can set the element shifted to the right four columns width.

Grid sort

By using push and pull class you can easily change column order.

Typesetting

Child elements depending on the value of the start, center, end, space-between, space-around and space-evenly, which are defined in its parent node typesetting mode.

Alignment

Child elements vertically aligned.

Order

To change the element sort by order.

Flex Stretch

Col provides flex prop to support fill rest.

Responsive

Referring to the Bootstrap responsive design, here preset seven dimensions: xs sm md lg xl xxl xxxl.

Flex Responsive

Support much more flexible responsive flex ratio, which requires CSS Variables supported by browser.

More responsive

span pull push offset order property can be embedded into xs sm md lg xl xxl properties to use, where xs={6} is equivalent to xs={{span: 6}}.

Playground

A simple playground for column count and gutter.

useBreakpoint Hook

Use useBreakpoint Hook provide personalized layout. xs only takes effect when the screen match the min width.

API

Row, Col, Grid, and their props are exported from @ceebee/ui/client.

Row

Property	Description	Type	Default	Version
`align`	Vertical alignment	`top \| middle \| bottom \| stretch \| {[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}`	`top`	object: 4.24.0
`gutter`	Spacing between grids, could be a string CSS units or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical]	`number \| string \| object \| array`	`0`	string: 5.28.0
`justify`	Horizontal arrangement	`start \| end \| center \| space-around \| space-between \| space-evenly \| {[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}`	`start`	object: 4.24.0
`wrap`	Auto wrap line	`boolean`	`true`	4.8.0

Col

Property	Description	Type	Default	Version
`flex`	Flex layout style. Number for 'flex: n n auto', string is applied directly (e.g. pure number string 'n' for 'flex: n 1 0')	`string \| number`	`-`	—
`offset`	The number of cells to offset Col from the left	`number`	`0`	—
`order`	Raster order	`number`	`0`	—
`pull`	The number of cells that raster is moved to the left	`number`	`0`	—
`push`	The number of cells that raster is moved to the right	`number`	`0`	—
`span`	Raster number of cells to occupy, 0 corresponds to display: none	`number`	`none`	—
`xs`	screen < 576px and also default setting, could be a span value or an object containing above props	`number \| object`	`-`	—
`sm`	screen ≥ 576px, could be a span value or an object containing above props	`number \| object`	`-`	—
`md`	screen ≥ 768px, could be a span value or an object containing above props	`number \| object`	`-`	—
`lg`	screen ≥ 992px, could be a span value or an object containing above props	`number \| object`	`-`	—
`xl`	screen ≥ 1200px, could be a span value or an object containing above props	`number \| object`	`-`	—
`xxl`	screen ≥ 1600px, could be a span value or an object containing above props	`number \| object`	`-`	—
`xxxl`	screen ≥ 1920px, could be a span value or an object containing above props	`number \| object`	`-`	6.3.0

Also available

Ceebee's server-safe Grid and Container remain at @ceebee/ui; use @ceebee/ui/client for the full 24-column contract.