Foundations

Grid system

sketch:Readyscss:Readyfigma:Ready

These are the recommendations to set up the values to use as your layout settings in your Sketch files.

Layout behaviors

Grids on breakpoints from S to M are fluid.

fluid-grid

From L to XXL breakpoints you can use fixed or fluid grids to fit your needs.

fixed-grid

fixed-grid

Sketch configuration

Breakpoint S

320px (Fluid)

320-fluid

360px (Fluid)

360-fluid

375px (Fluid)

375-fluid

Breakpoint M

680px (Fluid)

680-fluid

768px (Fluid)

768-fluid

Breakpoint L

1024px (Fixed & Fluid)

1024-fixed&fluid

Breakpoint XL

1280px (Fixed & Fluid)

1280-fixed&fluid

1366px (Fixed)

1366-fixed

1366px (Fluid)

1366-fluid

1440px (Fixed)

1440-fixed

1366px (Fluid)

1440-fluid

Breakpoint XXL

1920px (Fixed & Fluid)

1920-fixed&fluid