Link Search Menu Expand Document



  • source: 1


  • based on 12 Grids System, we divided the design area into 24 sections.
  • We name the divided area 'box'.
    • We suggest four boxes for horizontal arrangement at most, one at least.
    • Boxes are proportional to the entire screen as shown in the picture above.
    • To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.


  • frame outside the information area based on row and column, to ensure that every area can have stable arrangement.
  • row and col
    • column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by
    • if sum of col spans in a row are more than 24, then the overflowing col as a whole will start a new line arrangement.
  • alignment
    • base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement.
    • The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned.
    • You can also define the order of elements by using order.


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