Grid and Breakpoints
The grid defines the basic structure of our site and serves to cover every breakpoint.
Breakpoints
Breakpoints are adjustable widths that determine how the layout behaves and changes depending on device or viewport sizes. Designing on different breakpoints allows you to control when a layout needs to be adjusted to a specific screen size or for a specific device. Each breakpoint defines exact pixel values at which the layout can change. At each breakpoint, the layout can be adapted accordingly.
Our designs work seamlessly on a global scale and across all devices. We ensure that our content and systems deliver a consistent and user-friendly experience across all end devices.
| Breakpoints | Size |
|---|---|
XXLXXL | XXL≥ 1400px |
XLXL | XL≥ 1200px |
LGLG | LG≥ 992px |
MDMD | MD≥ 768px |
SMSM | SM≥ 576px |
XSXS | XS≥ 375px |
Mobile First
We follow a "mobile-first" approach, meaning that our layouts are initially designed and developed for mobile devices before being optimized for larger screens. This is because an increasing number of users are accessing our services via smartphones or tablets.
Grid and Types
The grid serves as the essential foundation for arranging visual elements. Utilizing the grid guarantees a consistent approach to creative decisions across products and provides a responsive framework for design on various devices.
Within the GROW design system, we mainly use a vertical column grid.
Vertical column grid
A column grid is a structure used in graphic and web design that divides a page or screen into vertical sections, known as columns. In the case of the grow design system, it consists out of 12 columns and 11 gutters.