Maturity
Overview
Grids streamline information presentation and enable seamless rendering on various devices for responsive design.
We have a set of grids defined for a variety of arrangements. This helps to lay out elements in a consistent manner across the experience. The following are the most used grids at our platform but makers are not limited to them:
- 1Fluid
- 1Fixed-1Fluid
- UpTo2
- FullGrid
Grids have a gutter padding that separates items and provides visual spacing, which can be adjusted for different screen sizes to maintain a visually appealing and functional layout on various devices and platforms.
|
Breakpoint |
Gutter padding |
|---|---|
|
SM (0-600) |
spacing-LG |
|
MD (600-1200) |
spacing-LG |
|
LG (1200-1800) |
spacing-XL |
|
XL (1800-∞) |
spacing-XL |
Take a look at our breakpoints definition
Grid types
1fluid
Holds a 1 column layout that goes from 1 to infinite rows. The column is 100% width just limited by the container. The row height size can be determined by the content or defined by a fixed size. There is a grid-gap between rows. This grid does not hold breakpoints.
Anatomy
|
Property |
Value |
|---|---|
|
RowHeight |
Intrinsic |
|
ColumnWidth |
100% |
|
GridGap |
Based on breakpoint |
1fixed-1fluid
It's a 2 columns grid where one of the columns remains with a fixed size meanwhile the other fills the rest of the viewport. Just has 1 row. The grid-gap between columns is customizable. Fixed-size column can vary between breakpoints.
Anatomy
|
Property |
Value |
|---|---|
|
FixedColumn |
Fixed value based on breakpoint |
|
FluidColumn |
100% width. Fills all available space on the container |
|
GridGap |
None |
|
RowHeight |
Intrinsic |
UpTo2
Stacks multiple items in one column until having enough room to place two items side by side. There is a gap between columns and rows.
Anatomy
|
Property |
Value |
|---|---|
|
FluidColumn |
100% width. Fills all available space on the container |
|
MinWidth |
The minimum width the container allows. Once reached the minimum displays 1 column. |
|
RowHeight |
Intrinsic |
|
GridGap |
Based on breakpoint |
FullGrid
An infinite range of items is stacked filling the space available in the container. When there is space for a new item, a new column is added on the right.
Anatomy
|
Property |
Value |
|---|---|
|
FluidColumn |
100% width. Fills all available space on the container |
|
MinWidth |
The minimum width the container allows. Once reached the minimum displays 1 column. |
|
MaxWidth |
The maximum width the container allows. Once reached a new item is added to the row. |
|
RowHeight |
Intrinsic |
|
GridGap |
Based on breakpoint |
None of the previous grids suit your needs? Write us at the #design-system Slack channel.
Quality checklist
This element passes the following requirements described in our Component lifecycle.
Beta
α · Design tokens
It uses Ariane design tokens.
α · Naming agreement
Its name is agreed upon and shared between design and development.
α · Responsive L1
Is responsive to different viewport sizes.
β · Responsive L2
The responsive behavior has been reviewed and validated by the team.
β · Docs L1
It has essential documentation with at least primary usage.
β · Use cases
All the uses are audited and refined.