Layout grid
Layout grid, including grid rows, grid columns, and grids, allow you to precisely control the position of layers and efficiently arrange and layout design content.
Scope of application for layout grid
You can apply grid rows, grid columns, and grids in layout grid to any frame, including:
- The top-level frames
- Nested frames within the parent frame
Moreover, you can use grid rows, grid columns, and grids at the same time on a single frame as needed.
Apply layout grid
Layout grid come in three types: a uniform square Grid, Columns, and Rows. Here are the steps to create them:
- Apply a layout grid: Create a frame, click the + icon next to layout grid in the right sidebar, and an 8px-sized grid will be applied to the frame by default.
- Switch grid type: Click the icon to the left of the grid, and a settings popup for the layout grid will appear. Click the dropdown box in the top left corner of the settings popup to switch between grids, columns, and rows.
Next, let's explore how to set the properties of grids, columns, and rows.
Set uniform grid properties
The uniform grid is suitable for scenarios requiring precise control of dimensions, such as icon design.
You can define the following properties of your grid:
- Size: The default grid size is 8px, which means that each square has 8x8=64 pixels. You can manually input a value in the size box to modify the grid size.
- Color: Adjust the color of any layout grid in the color swatch.
You can also create multiple grids with different sizes and colors in the right sidebar to meet specific requirements.
Set column and row properties
Layout grid include columns and rows. You can use grid columns and rows to help organize content in an orderly manner or achieve responsive design.
You can define the following properties of the columns and rows:
-
Count: The Count of grid columns or rows, defaulting to 8. You can input a value manually. If you delete the number in the input box, the value will become (0) automatically.
-
Color: Set the color of the grid columns or rows.
-
Layout: Configure the layout mode of layout grid. It can be set to stretch (which makes the grids adapt to the size of the frame) or start from a certain side. The following table illustrates the layout modes and effects for grid rows and columns.
| Grid type | Layout type | Layout effect |
|---|---|---|
| Column | Left | Layout from left to right |
| Center | Layout from the center towards both sides | |
| Right | Layout from right to left | |
| Stretch (Default) | Automatically stretch with the frame's width, maintaining consistent margins on both sides | |
| Row | Top | Layout from top to bottom |
| Center | Layout from the center towards the top and bottom | |
| Bottom | Layout from bottom to top | |
| Stretch (Default) | Automatically stretch with the frame's height, maintaining consistent margins on both top and bottom |
- Column width or row height: Adjust the width of each column or height of each row. If the layout is set to Stretch, Creatie will automatically calculate the width or height.
- Gutter width: The gutter refers to the distance between each column or row.
- Offset: The Offset defines the distance from the top or left the column or row starts from.
- When the layout type is fixed to one side, the offset value is the margin between the grid and the frame on that side. For example, for a grid column fixed to the right side, with an offset of 8px, the margin between the grid column and the frame's right side is 8px.
- When the layout type is centered, offset cannot be set.
| Grid type | Layout type | Offset effect |
|---|---|---|
| Column | Left | Set the distance from the left side of the container to the grid |
| Center | Cannot set an offset | |
| Right | Set the distance from the right side of the container to the grid | |
| Stretch (Default) | Cannot set an offset | |
| Row | Top | Set the distance from the top of the container to the grid |
| Center | Cannot set an offset | |
| Bottom | Set the distance from the bottom of the container to the grid | |
| Stretch (Default) | Cannot set an offset |
- Padding: The padding can only be set when the layout type is stretch. You can set the padding between columns and the frame's left and right sides or between rows and the frame's top and bottom sides.
How to reuse layout grid
You can create commonly used layout grids as styles for reuse. Like all other styles, you can upload them to the team library for other team members to use.
Create a style
- Click the Style icon next to the Layout grid to open the grid styles popup
- Click the + icon in the top right corner of the style popup, input information of the new style, and click Create style
Apply a style
After creating all the grid styles, click the Style icon next to the layout grid and select the style you want to use in the grid styles list.
The order in the grid styles list is: local styles appear at the top, followed by team library styles.
Toggle layout grid
Once you add layout grids to design content, the corresponding grid and column/row effects will be displayed on the canvas by default. However, you can toggle the visibility of these set grid and column/row effects on the canvas in two ways:
Toggle all layout grids
You can use a keyboard shortcut or the view settings to toggle the visibility on all layout grids in your file without deleting them.
- Click the dropdown box next to the Zoom percentage in the top right corner of your screen to open the View Settings menu, and click Layout grids to toggle the layout grid off and on
- Use the keyboard shortcut:
Shift+G
Note:
- This setting only applies to your account and does not affect your collaborators.
- Layout grid are not exported when exporting slices, nor are they displayed during prototype playback.
Toggle individual layout grid
If you would like to enable or disable a single layout grid, all you need to do is click the Eye icon next to the layout grid in the right sidebar to toggle the layout grid off and on.
Note: If a frame with added layout grids is flipped or rotated, the layout grids will not be displayed.
Relationship between layout grid and constraints, smart layout
In a frame, layout grid cannot be used simultaneously with smart layout but can be used with constraints.
Combining layout grid with constraints allows for a more powerful and flexible responsive layout. For instance, in a frame with a layout grid, you can set constraints for layers within the frame, and these constraints will be applied to the nearest grid row or column.
👍🏻 Helpful or 👎🏻 Not Helpful
👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful