8 pixel grid
Grids are a structured framework composed of horizontal and vertical lines that define the layout and alignment of elements within a design. They help maintain consistency and order in various design elements, such as text, images, and interactive components.
In Delish, we use an 8px grid.
Spacers
A spacer (1) refers to the space between two columns in a layout. The spacer's value will depend on what device you're building for. In Delish, we follow the following values:
|
Desktop |
Tablet |
Mobile |
|---|---|---|
|
24px |
16px |
8px |
Grid by Device
|
|
Desktop |
Tablet |
Mobile |
|---|---|---|---|
|
Width |
1400px wide |
1024px |
360px |
|
Height |
Variable |
Variable |
Variable |
|
Column number |
16 |
8 |
4 |
|
Spacer |
24px |
16px |
8px |
|
Outside margin |
64px |
40px |
24px |
|
Example |
|
|
|
Spacing tokens