Ingredients for on-brand layouts and composition. This section contains guidelines on spacing units, the grid system, and containers. Try to stick tothese guidelines when creating new pages.
The grid system is made up of 12 columns with a gutter between columns & rows of 32px (2em). This grid system takes full advantage of the Webflow CSS Grid element and is responsive on every screen size. On mobile devices, change the column gap to 16px (1em). Leave the row gap at 32px (2em).
On desktop devices and above, you can take full control of the 12-column grid. As the screen size gets smaller, the range of grids becomes smaller accordingly. On tablet devices and mobile landscape, the maximum amount of columns should be 4 columns. For mobile portrait, the maximum is 2 columns. Have a look at the following table which shows media-query breakpoints.
