Grid canvas

Grid system basics

The grid canvas on the Mobi platform uses a square grid system. Each square has a specific size, usually measured in pixels. The grid system provides a reference for your layout, which makes it easier and more precise to adjust the position and size of components.

Gridlines: These are the horizontal and vertical lines on the canvas. They help you align and position components. To display the gridlines, press the Ctrl key on Windows or the ⌘ key on Mac.

Drag, resize, and position components

Follow these steps to drag, resize, and position components on the grid canvas:

• Add a component: Select a component from the library on the left and drag it to the desired position on the grid canvas.

• Drag to move:

  1. Select a component, press and hold the left mouse button, and then drag the component to a new position on the canvas.

  2. As you drag, the component automatically snaps to the nearest gridline, which keeps your layout organized.

• Adjust the size:

  1. Select the component you want to resize.

  2. Drag the handles on the component's edges or corners to make it larger or smaller.

• The component also snaps to the grid as you resize it, which ensures that the component's size aligns with the grid.

• Use keyboard shortcuts:

  • Use the ↑, →, ↓, and ← arrow keys to move a component precisely.

  • Use Ctrl + an arrow key on Windows or ⌘ + an arrow key on Mac to resize a component precisely.

Responsive layout

A responsive layout automatically adjusts when a component's height changes, which ensures that all parts of the page display correctly and remain aligned. On the Mobi platform, responsive layouts work as follows:

• Component width: A component's width is fixed based on the grid and cannot be adjusted dynamically.

• Component height: A component's height can be one of the following three types:

  1. Fixed: The component has a fixed height and occupies a specific number of grid rows.

  2. Automatic: The height adapts to the content, such as a text component with line breaks. The height is not fixed and changes dynamically with the amount of content.

  3. Custom: The height is set by custom CSS, such as 50vh. This height is not fixed and adjusts dynamically based on the CSS definition.

• Layout changes for components with variable height: For components with Automatic or Custom height, if their height changes and causes an overlap with components below them, the lower components automatically shift down. This dynamic adjustment helps keep the page layout stable and organized.

  • For example, in a blog, the content area is often a text component with Automatic height. A comment box is placed below it. When the amount of blog content changes, the comment box automatically moves to remain directly below the content.

The main purpose of a responsive layout is to automatically adjust the position of other components when one component's height changes. This keeps the page structure consistent and organized. This feature is especially useful for pages with dynamic content, such as blog posts and comments.

Set the number of columns

For container components, the grid has 16 columns by default. You can set the grid to 32 or 64 columns for more precise control over the page layout.

Quickly build and optimize the page structure

Use the grid system and responsive layout to quickly build and optimize your page structure:

• Standardize the layout: Use the grid's alignment and snap features to arrange components neatly and create a standard page structure.

• Adjust with flexibility: The drag and resize features make the layout flexible, which lets you quickly change the position and size of components as needed.

• Adjust dynamically: When a component's height changes, the responsive layout automatically adjusts the positions of other components to keep the page structure consistent and organized.

Summary

The grid canvas on the Mobi platform is an efficient, precise, and flexible layout tool. The gridlines and snap feature help you quickly build a standard, organized page layout. Responsive layouts optimize page behavior when component heights change, making your design more flexible and intelligent. This guide helps you use the grid canvas to efficiently design and lay out pages.