In most business situations, PCB Design system needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.

We divided the design area into 24 sections 56px with 32px gutters. Or 12 sections 112px with 32px gutters. The layout is a centered.

We divided the design area into 24 sections 56px. The layout is a centered.

We divided the design area into 24 sections 40px with 16px gutters. Or 12 sections 96px with 16px gutters. The layout is a centered.

We divided the design area into 24 sections 32px with 16px gutters. Or 12 sections 80px with 16px gutters. The layout is a centered.

We divided the design area into 24 sections 16px with 16px gutters. Or 12 sections 48px with 16px gutters. The layout is a centered.

24px is baseline grid

All components align to an 8px square baseline 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.

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