penpot/penpot-docs
1
0
Fork 0
mirror of https://github.com/penpot/penpot-docs.git synced 2024-07-06 05:41:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Guides

Browse Source
This commit is contained in:
andy 2022-02-24 15:20:06 +01:00
parent 130499d632
commit b54b82bb7a
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/guides.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

18
user-guide/grids-and-layouts/index.njk
View File

@ -1,10 +1,12 @@
---
title: 06· Grids & Layouts
title: 06· Grids & Guides
---
<h1 id="grids-layouts">Grids and Layouts</h1>
<p class="main-paragraph">This chapter describes all you need to know about how to set up grids in Penpot.</p>
<h1 id="grids-guides">Grids & guides</h1>
<p class="main-paragraph">This chapter describes all you need to know about how to set up grids and guides in Penpot.</p>
<h2 id="grids-layouts">Grids and layouts</h2>
<p>Grids are design aids that are used to help you to align content to a
geometric structure. In Penpot there are three types of grids:
<strong>square</strong>, <strong>columns</strong> and <strong>rows</strong>.</p>
@ -66,3 +68,13 @@ geometric structure. In Penpot there are three types of grids:
<p>To hide or show all the grids at a file you can press <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
<p>If you want to enable or disable the snapping to grids you can press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
<p><img src="/img/grids-snap-visibility.gif" alt="grids" /></p>
<h2 id="guides">Guides</h2>
<p>To create guides click anywhere on the ruler an drag to some point of the viewport. Click on the vertical ruler to create a vertical guide and the horizontal ruler to you know what.</p>
<p><img src="/img/guides.gif" alt="grids" /></p>
<p>To <strong>delete guides drag</strong> the guide to the ruler or select the guide and press delete / supr.</p>
<p>To <strong>show/hide guides</strong> use the same shortcut as for rules: <kbd>Shift/CMD + Ctrl + R</kbd></p>