We use a standard 12 column responsive grid system.
A grid system helps us organize our user interfaces into columns and rows. It helps our designers group like data, and elements into familiar patterns our users can recognize. This helps our user's by reducing cognitive load by adding clarity and order to the interface.
Our container, column, gutter and margins sizes are based on the very popular framework Bootstrap 4 Grid System. We do not require our developers to adhere to the bootstrap 4 naming conventions or development patterns. However, if you are developing a grid system, we encourage you to study the sizing and structure the framework uses to achieve its responsive grid system.
To learn more about using a grid to design responsive layouts that adapt to any screen size and orientation, we recommend reading Material.io Responsive Layout Grid. It has a great breakdown of what columns, gutters and margins are, how to design for consistency, and adaptive layouts.