Grid
The grid is the foundation of all of our designs in Procore. Our layouts use a 12-column grid to ensure our designs have the flexibility to withstand the most unique and complex interfaces.
12-Columns
It is important to note that our grid, and how it works, will be defined based on layout. However, since the 12-column grid is used on our most common layouts (read, create, update), the 12-column grid will be used most frequently throughout our product.
This grid is only used for the main content area. In other words, it excludes navigation and action spaces, including headers and footers. However, the content within footers aligns with the container of the content area.
Responsiveness
Our grid will use both fixed and flexible paradigms. This means that the grid will be flexible after a defined max width, and once the max is reached, it will be fixed, and only the margins will increase.
Example of how the grid scales at larger screen widths.
Example of how the grid scales at smaller screen widths.