From the stack to the horizontal arrangement.

You can create a basic grid system by using a single set of GridRow and GridCol grid assembly, all of the columns (GridCol) must be placed in GridRow.

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 a array to set vertical spacing, [horizontal, vertical] [16, { xs: 8, sm: 16, md: 24, lg: 32 }].

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.

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

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

Child elements vertically aligned.

To change the element sort by order.

GridCol provides flex prop to support fill rest.

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

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}}.

A simple playground for column count and gutter.

Use OnBreakpoint provide personalized layout.