Skip to content
search icon
clear
Component Status

Grid alignment

The organisation of space is key to every great design. 
By aligning your component to a grid, you will provide visual structure throughout your product.

Guidelines

Using a grid as a starting point for your component implementation will help you arrange your content into structured proportions. You also have to keep in mind that EDS is based on an 8px ratio. This means that you always have to keep a minimum of 8px beetween objects and elements. Please read the grid page for general guidelines.

Best practices

Don’t

  • Do not use less than 8px between each components.
  • If some of your objects are aligned to the grid do not set other objects off-grid.

Align object within a frame

As you have applied the grid size to your frame, you can use the columns to place your objects. It is recommended that you keep all your objects within the columns. In some cases you might need to be off-grid. You should then keep in mind the 8px ratio beetween elements.

Grid inside a component

Grids can also be used inside components. Make sure you use the correct grid according to the size of your component. Those components can be imported in your frame where another grid size has been applied.

Edit this page on GitHub