It’s fundamental to everything we design. The Grid is the geometric foundation of all the visual elements of Zeta Design, from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making.
The basic unit of Zeta's Grid geometry is the 4px square mini unit. Multiples of mini units compose the dimensions of columns, rows, boxes, along with their margins and padding. The mini unit adapts to your content while maintaining a consistent visual rhythm.
At breakpoint boundaries, mini units divide the screen into a fixed master grid, and multiples of mini units map to fluid grid column widths and row heights. Fixed boxes are sized in mini units, as are the fixed dimension of hybrid boxes. Margin and padding are always applied in fixed mini unit multiples. Boxes are sized by applying a sizing scale based on either fixed mini units or fluid column widths, along with a core set of aspect ratios.
Using a layout grid is ultimately most useful when the values it provides are used across the box model. Adding, removing and multiply space with number 4 in mind.
.svg)
The base grid is the 12 column grid. Adding, removing and multiply columns with number 4 in mind.
Use Fr (Fraction unit) unit when spacing columns. An input that automatically calculates layout divisions while adjusting for gaps inside a grid.
Columns and rows create key lines that are essential for visual rhythm, especially for typography. Construct columns by either dividing a space into a fluid grid, or by tiling fixed boxes in multiples. See our Figma file.
.svg)
The style of the grid can adapt based on design requirements to fluid, fixed or hybrid or the combination of all these three.
A fluid grid creates space by fours. This division is immediately evident in the 4x column structure. Within a breakpoint, the column count is constant, and unit size scales with screen size. Choose a column count by starting with one, then add, divide or multiply by 4 as needed.
A fixed grid starts with a fixed unit size from the sizing scale, then tiles and wraps as needed, like text. To employ the 4px concept, multiply or add box sizes by 4 and mix them together.
Hybrid grids are also frequent in practice, and hybrid boxes have properties of both.
The margins at the outer edge of the grid are always a fixed size of 24px within a breakpoint, even when columns are fluid.
Paddings in case of a non gutter grid must be 24px for tablets and desktops and 16px for mobile.
Grid gutters can be absent or present. The gutter distance from column to column as well as row to row is always 24px for tablets and desktops and 16px for mobile. For closely related content, consider a gutter-less grid.
Use this set of standard breakpoints to maintain layout integrity across screen sizes. For best results, test designs and code at each of these standard breakpoints.
We provide a sizing scale for both fixed and fluid sizes. Use it to size content as well as negative space. Like a type scale, the sizing scale constrains the range of sizes to improve consistency and rhythm, while still allowing a wide range of sizes. Spacing tokens are used to apply these relationships consistently across UIs.
Use this fixed sizing scale, comprised of select mini unit multiples, when sizing icons, tiling boxes, and applying vertical margin space.
For fluid grids, the column width is the base unit. Just as a box can span multiple columns, its height is a multiple of column width. Use cases are leading section in a webpage, divided section for editorial content, modals, etc. Check out the breakpoints table for pixel sizings.
.svg)
After determining your base size, multiply it as needed for each use. For box sizing, apply an aspect ratio too.
.svg)
When sizing boxes, constrain dimensions to one of the aspect ratios shown below whenever possible. Doing so will heighten the perception of unity between products. Choose an aspect ratio from the table, then multiply the base unit in each dimension as needed to set width and height, maintaining the ratio in either portrait or landscape.
1:1, 2:1, 2:3, 3:2, 4:3, 16:9
Everything needs to align to the 4px (or 1 mini unit) grid including typography. Use the fixed sizing scale to set vertical spacing between sections, by adding it to the top or bottom margin of a box:
.svg)
Components can be sized like other boxes: either fixed or fluid, and often hybrid, with fixed height and fluid width.
.svg)
Here is a collection of specific devices and its screen sizes. Reference document
