Skip to main content

​
What this means

A grid is a layout structure that divides a canvas into consistent columns and rows to help align and organize content. Grids act as invisible guides (columns and rows) to align text, images, and other content, making layouts balanced, readable, and responsive across different screen sizes, ultimately creating a better user experience. Grids don’t decide what your design looks like — they decide where things should live. In simple terms:
Grids help you place things consistently across a layout.

​
Why this matters

Grids become useful when layouts start to feel hard to manage. As screens get wider and content increases, aligning elements manually becomes fragile. Small changes start to cause misalignment, uneven spacing, and inconsistent widths. Grids provide a shared structure that:
  • Defines where content can live
  • Keeps sections aligned as layouts grow
  • Makes it easier to add, remove, or resize elements without breaking the layout
In practice, grids are less about visual polish and more about control — especially in complex layouts like dashboards and data-heavy pages.

​
Use Cases

  • Page layouts
  • Dashboards
  • E-commerce sites
  • Multi-column content e.g cards

​
How to set up a grid:

1

Select a Frame

Select a Frame with the target elements
2

Add Grid

In the right panel, scroll to Layout, and select Grid
3

Grid Type

Choose a Grid type, either rows or column, and customize accordingly.

​
Common mistakes across tools

  • Treating grids as visible design elements
  • Over-constraining layouts to the grid
  • Ignoring content when choosing column counts
  • Using grids where simpler layouts would work better