Visual design can be exciting—until you're knee-deep in the details. Whether it's aligning text boxes to prevent overlaps, fixing negative space, or simply making sure the right data stands out, just ironing out inconsistencies takes a lot of moving parts.

Grids are Canvas containers—like sections, tabs, flexes, tables, or textboxes—that help contain and organize your data and other elements. They consist of sets of uniform cells that serve as measuring guides to place your data proportionately.

Let's explore its properties and possibilities:

With these capabilities,

* The grid component helps position image, data, and other elements easily without any hassle in grouping.

* The gutter spacing helps provide visual balance between elements added to the grid.

* The breakpoint width helps make designs responsive.

      - With breakpoint widths enabled for the entire grid, you can make the entire template responsive to various screen sizes.

      - You can add grids within the grid and set nested breakpoint widths to render a smooth and seamless responsive design.

      - Use breakpoint widths to emphasize key data and make it accessible.

 

Here’s how templates built on Grid will look and respond:

 

Thus, in addition to simplify the design process, the grid component helps deliver a thoughtful, clean, proportionate, yet adaptive user interface, such that users can have a positive experience regardless of their screen orientation.

Likewise, you can use grids to build dynamic templates that adapt to records' widths in module views, like custom list views and tile views.

 

That's all for Canvas's grid component—but don't click away just yet. We have one more enhancement to highlight here: The tab order in form view.

Your record forms contain numerous fields, and to navigate through them with dexterity, you'd often use the tab key in your keyboard. This tab key will bring focus to each field as you navigate through the Canvas-created form in a single direction—left to right or top to bottom, per your browser’s DOM order. While this keyboard shortcut is useful when filling out forms, having to hop through all fields just to reach the most important fields is definitely inefficient.

Thus, to alleviate form fatigue and enhance user convenience, we are bringing what is called tab focus direction.

Based on your form-filling habits, you can apply the tab focus direction to move from left to right or top to bottom. Likewise, you can use Shift+tab shortcut to navigate to the previous field. Either way, you can determine the tab focus direction for every container in your Canvas, or apply the direction to the whole page and let the nested components follow the parent component’s preference.

Let’s see how a record form is navigated without and with the tab order in the below video!

Canvas, built to keep up with your users' pace, delivers convenience at every keystroke. 

Kind regards, 
Saranya Balasubramanian
CRM - Marketing