Grid

Grids help you design your screens. In LeafyGreen Figma you have 7 grids to chose from.

Depending on the size of the grid, you may have more or less columns. The size of the gutter (space between columns) and margin (space on each horizontal edge of the grid) may change.

In LeafyGreen Figma we’ve also accounted space for our collapsed or expanded sideNav component.

grid-guideline-1.png

Grids are useful for defining responsive patterns. Depending on how many columns your UI elements stretch you can define how they should behave on different screen and browser sizes.

grid-guideline-2.png

Consider implementing a max-width when designing. On some pages on mongoDB.design you’ll notice that some content only extends up to a certain point on the largest of screens.

grid-guideline-3.png

Our 4px baseline grid is useful for aligning type and other UI elements. Learn more about type system.

grid-guideline-4.png

In addition to our grids you can use our spacer blocks to help you space UI elements from each other.

grid-guideline-5.png