<aside> <img src="/icons/home_blue.svg" alt="/icons/home_blue.svg" width="40px" /> Home | Foundations | Components | Addons | Patterns
</aside>
The grid is the foundation for positioning elements onscreen. Designing to the grid helps create seamless, easy to follow experiences.
Consistent use of a grid system provides the foundation for harmoniously and consistently positioning elements onscreen. Designing to the grid helps create an experience that facilitates understanding and brings order to the page.
We define a horizontal grid for content and UI elements to align to, creating a visual structure with content. EstructuraTitle
In our grid system we reserve space for the navigation on the left, and apply a center-aligned 12-column adaptive layout to the content. You can apply a fixed width or a fluid grid layout. The fixed-width layout has a max-width of 960px and is useful for long form content. The fluid layout full-screen works better for screens that are data or interaction heavy.
Example columns and rows
The standard breakpoints below will help you maintain design consistency across all screen sizes.
The construction of elements and components is based on the 8PX GRID SYSTEM which uses multiples of 8 that are used in margins, fills and in the dimensions of different elements that are part of the design.
We provide a size scale for fixed and fluid sizes. Use it to size content and negative space. Like a type scale, the size scale restricts the range of sizes to improve consistency and pacing, while allowing a wide range of sizes. Spacing tokens are used to apply these relationships consistently.
