# Grids & Guides Grids & guides are a great tool when you need to add some structure or context to the background of your map. Kumu supports the following underlays: * [Grids](#add-a-grid) * [Guides](#add-guides) * [Radars](#add-a-radar) * [Background images](#add-a-background-image) *This video below explains how to create Grids & Guides in the advanced editor. Want to know how to use them in the Basic Editor? Please jump to the sections listed above.* {% embed url="" %} ## Add a grid **In the Basic Editor** 1. Click the settings icon ![](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-29572adb5b74c3a9b2db8fca66f2a4a00fe6b652%2Fsliders-h.svg?alt=media)to open the [Basic Editor](https://docs.kumu.io/overview/user-interfaces/view-editors#basic-editor) 2. Click "More" and then select "Grids & Guides" to open the menu 3. Check the "Show grid" checkbox to make the grid appear You can use the settings below **Grid** to adjust color, offset and width of your grid.

Add a grid

**In the Advanced Editor** ![grid showcase](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-f6ea07d9c29df30d71dc83d8089515590a1447d9%2Fgrid-showcase.png?alt=media) You can use the `layout-grid` property of `@settings` in the Advanced Editor to add a grid: ```scss @settings { layout-grid: on; } ``` Once you have the grid turned on, you can customize the distance between gridlines using `layout-grid-offset` and customize the width of lines using `layout-grid-width`. ```scss @settings { layout-grid: on; layout-grid-offset: 20; layout-grid-width: 1.5; } ``` By default, gridlines will extend infinitely. But, you can use the `layout-bounds-xmin`, `layout-bounds-xmax`, `layout-bounds-ymin`, and `layout-bounds-ymax` properties to set a stopping point for the gridlines. ```scss @settings { layout-grid: on; layout-bounds-xmin: 0; layout-bounds-ymin: 0; layout-bounds-ymax: 550; layout-bounds-xmax: 500; } ``` ![grid with bounds](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-4b282c048c6b14ea617f10e3299d791c0890b700%2Fgrid-guides-bounds.png?alt=media) Finally, you can use the `layout-grid-color` property to customize the color of gridlines (replace `color` with any CSS web color or hex color code): ```scss @settings { layout-grid-color: color; } ``` ## Add guides **In the Basic Editor** To add a guide to your map, follow the following steps: 1. Click the settings icon ![](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-29572adb5b74c3a9b2db8fca66f2a4a00fe6b652%2Fsliders-h.svg?alt=media)to open the [Basic Editor](https://docs.kumu.io/overview/user-interfaces/view-editors#basic-editor) 2. Click "More" and then select "Grids & Guides" to open the menu 3. Adjust the guide settings and click "Add guide" to make the guide show up on your map

Add guides

Guides can be *horizontal*, *vertical*, or even a *circle*. To remove an existing guide, click the "Remove" button. **In the Advanced Editor** You can use the Advanced Editor to add vertical, circular, or horizontal guidelines. Here's the basic syntax for vertical and horizontal lines: ```scss @settings { layout-guides: x(coordinate), y(coordinate); } ``` Replace `coordinate` with any number, indicating the x or y coordinate where you would like the guide to be drawn. `x(coordinate)` draws a vertical line, and `y(coordinate)` draws a horizontal line. To draw circular guidelines, you can choose between two different syntaxes: ```scss @settings { layout-guides: circle(radius), circle(x, y, radius); } ``` If you're using the `circle(radius)` syntax, replace `radius` with any number to draw a circle with that radius. When you're using this syntax, the circle will always be centered at `0, 0`. If you'd like to center your circle somewhere else, for example, an x coordinate of 40 and a y coordinate of 20, you can use the `circle(x, y, radius)` syntax. Replace `x` with the center's x coordinate, `y` with the center's y coordinate, and `radius` with the circle's radius. **Note:** to add more than one guide, just leave a space between the guide declarations. Here's an example that adds two vertical lines, one horizontal line, one circle with radius `100` centered at `0, 0`, and one circle with radius `100` centered at `100, 50`: ```scss @settings { theme: dark; layout-guides: x(0) x(100) y(0) circle(100) circle(100, 50, 100); } ``` ![guides example](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-8b0af3f7f8ce18eeac090d0f3fa62c406a068575%2Fguides-dark.png?alt=media) For additional styling, use the `layout-guide-width` and `layout-guide-color` properties to customize the width and color of guides. ## Add a radar You can add a radar of concentric circles to your background to play with positining of your elements. If you want to pin elements in place, visit [this guide here](https://docs.kumu.io/frequently-asked-questions/how-do-keep-elements-from-moving). ![default radar](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-820cff56765b934d5315ddf92d4fc6ce879b26c6%2Fradar-default.png?alt=media) You can use the `radar` property of `@settings` in the Advanced Editor to add a radar: ```scss @settings { radar: on; } ``` The radar will come with a few default rings and axes, which you can easily override using the `radar-rings` and `radar-axes` properties. Each comma-separated value in those properties will create and label a new ring or axis: ```scss @settings { radar: on; radar-rings: INTENT, DESIGN, FEEDBACKS, PARAMETERS; radar-axes: BEFORE PROBLEM, FIRST CONCERN, PROBLEM, CRISIS, ADAPT OR RESTORE; } ``` ![systems leverage radar](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-8e0608eb6a0a22559090fbb797006a84056468b2%2Fsystems-leverage-radar.png?alt=media) You can customize your radars extensively, changing the color, font color, the distance between rings, etc. To see a full list of supported properties and learn how they customize the radar, head over to our [@settings reference](https://docs.kumu.io/overview/advanced-editor-hub/settings-reference) (type "radar" to filter the list). ## Add a background image For full instructions on adding a background image, see [our full images guide](https://docs.kumu.io/decorate/images#add-a-background-image).