The grid system of layout, we define the external framework of information blocks based on row and column (col) to ensure that each area of the page can be robustly arranged.

Our grid system supports the Flex layout, allowing the horizontal alignment of child elements within the parent node - left, center, right, equal width, scattered arrangement. Between child elements and child elements, support top alignment, vertical center alignment, bottom alignment. At the same time, support the use of order To define the order of the elements.

From stacking to horizontal arrangement.

Using a single set of Row and Col grid components, you can create a basic grid system. All Col must be placed in the Row.

The grid often needs to work with the interval. You can use Row's Gutter Properties, we recommend using (16 + 8n) px as a grid interval. (n is a natural number)

Vertical gutter can be in the form of an array. The first item of the array is horizontal gutter and the second item is vertical gutter.

If you want to support responsiveness, you can write {xs: 8, sm: 16, md: 24, lg: 32}.

Dark for content area, light for spacing

Use row-flex to define a Flex layout whose child elements are based on different values start,center,end,space-between,space-around, define their typesetting methods in the parent node respectively.

Change the sorting of elements through order of the Col.

Referring to Bootstrap's responsive design, preset six response sizes:xs, sm, md, lg, Xl, xxl.