This document aims to assist Korean users who are learning Framer by addressing the lack of Korean resources. We translated content from the official blog into Korean and added practical information. We hope this will be of some help to those using Framer.

Why use a layout grid?

When designing, if elements are not neatly placed, the screen may appear cluttered. In such cases, try using a 'grid'.
A grid is an auxiliary tool that helps align and organize elements within the canvas, so once you activate the grid and place your elements, the design can feel much more balanced and orderly. Overall, it greatly aids in conveying a consistent impression.

How to add a grid

1. Click the Framer logo at the top left

2. Open View

3. Select Show Guides from the menu

Note : You can quickly toggle the guides using the shortcut key ^G without navigating the menu. Shortcuts are displayed next to feature tabs or menus for reference.

How to set grid properties

When you need to change grid settings, select the element (frame) and modify the settings in the Grid Settings Menu Guides in the right panel to fit your project.

• Type (Grid Type): Choose between column or row grid

• Count (Grid Count): Set the number of grids

• Align (Grid Alignment): Align the grid to the left, center, right, or justify

• Width (Grid Width): Set the width of the grid

• Gap (Spacing): Set the space between grids

• Margins (Grid Alignment Edge Margin): Set the margins of the grid alignment edge (e.g., set the left margin for left alignment)

• Color (Grid Color): Set the color of the grid edges

How to remove a layout grid

When you no longer need the grid displayed on the canvas, you can disable it using the following method.

1. Click the Framer logo at the top left

2. Open View

3. Unselect Show Guides from the menu

Note : Press the shortcut key ^G once more to quickly disable the guides.

This article is a translated and adapted version of Framer's official blog content titled ‘Adding a layout grid’.