This document aims to address the challenges faced by Korean users learning Framer due to a lack of Korean resources. It translates the content of the official blog into Korean and adds practical information. I hope this is of some help to those using Framer.

Why use a layout grid?

When designing, if elements aren't neatly arranged, the screen can appear cluttered. In such cases, consider using a 'grid'.
Grids are auxiliary tools that help align and organize elements within the canvas, so activating the grid before placing elements can give your design a much more balanced and orderly look. It greatly aids in providing an overall 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 also use the shortcut ^G without going through the menu to quickly toggle guides on and off. Shortcuts are displayed alongside functions in the menu, so keep an eye out.

How to set grid properties

When you need to change grid settings, select an element (frame) and adjust the settings in the Guides menu on the right panel to fit your project.

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

• Count (Number of Grids): Set the number of grids

• Align (Grid Alignment): Align grids in left, center, right, or justify format

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

• Gap (Spacing): Set the spacing between grids

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

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

How to disable layout grid

If a grid displayed on the canvas is no longer needed, you can disable it using the following method.

1. Click the Framer logo at the top left

2. Open View

3. Deselect Show Guides from the menu

Note : Press the shortcut ^G once more to quickly turn off the guides.

This post is a translated and adapted version of Framer's official blog content 'Adding a layout grid'.