Grids

Breakpoints are the building blocks of a responsive UI, they define the screen sizes where the design should adjust to an specific layout to fit on the screen device. For our product we are going to manage five sizes of screens: SM, MD, LG, XL and 2XL.

Grid and column system for extra large resolutions and screens, allows a fluid adjustment.

XL breakpoint Grid and column system — 12 columns | 24px gutter | 32px outer margin

Grid and column system for large resolutions and screens, allows a fluid adjustment.

LG Breakpoint Grid and column system — 12 columns | 18px gutter | 24px outer margin

Grid and column system for medium resolutions and screens.

MD Breakpoint Grid and column system — 12 columns | 18px gutter | 24px outer margin

Grid and column system for small resolutions and screens <= 640px.

SM Breakpoint Grid and column system — 12 columns | 14px gutter | 16px outer margin

Site Strategy

Grids