Grid system
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](/static/025be162df3560e6d637a2f7da6ba75f/74cfa/fluid-grid.png)
From L
to XXL
breakpoints you can use fixed or fluid grids to fit your needs.
fixed-grid
![fixed-grid](/static/8f1037f043f28f6081c97952ba0b2496/04abd/fixed-grid.png)
Sketch configuration
Breakpoint S
320px (Fluid)
![320-fluid](/static/a84b801c63a005034acd9b1408125836/a6d36/320-fluid.png)
360px (Fluid)
![360-fluid](/static/90de6cd3c136f755a34f2a3c4dd6e346/a6d36/360-fluid.png)
375px (Fluid)
![375-fluid](/static/4638a9af813c9d1a170adaee5e4a7732/a6d36/375-fluid.png)
Breakpoint M
680px (Fluid)
![680-fluid](/static/e52ded6b8b3724fe6019f9730914613a/a6d36/680-fluid.png)
768px (Fluid)
![768-fluid](/static/91829231168ce7a4726ba0e455cbf7ef/a6d36/768-fluid.png)
Breakpoint L
1024px (Fixed & Fluid)
![1024-fixed&fluid](/static/97994290698819c2c1964f80f5c14777/a6d36/1024-fixed%26fluid.png)
Breakpoint XL
1280px (Fixed & Fluid)
![1280-fixed&fluid](/static/9c976d4c605125e56b975df154378d73/a6d36/1280-fixed%26fluid.png)
1366px (Fixed)
![1366-fixed](/static/ae2e6c903e4d8430fdc6dfb53e9d9f5d/a6d36/1366-fixed.png)
1366px (Fluid)
![1366-fluid](/static/1757d0ae61d18a3cbd2435fb1e2b0e88/a6d36/1366-fluid.png)
1440px (Fixed)
![1440-fixed](/static/ef51bdc56b866dadf6d58cab04368d22/a6d36/1440-fixed.png)
1366px (Fluid)
![1440-fluid](/static/97349edadbe7112bee26462f40560bc0/a6d36/1440-fluid.png)
Breakpoint XXL
1920px (Fixed & Fluid)
![1920-fixed&fluid](/static/988777b4655a3c6e35edefcbe8cbfec7/a6d36/1920-fixed%26fluid.png)