Grid is an advanced layouting tool that lets you precisely position elements within a 2-dimensional framework of columns and rows. You can adjust the grid in any section or container, and rearrange the layout at each breakpoint to achieve intricate, responsive designs that look great on any screen size.
Adjusting the grid layout
Each section and container you add has a 1x1 grid by default. To change the layout, select the section or container and from the floating menu choose a preset layout or create a custom grid. You can also adjust the grid layout from the Inspector panel under Display.
Adjusting the grid from the Inspector panel
Under Display in the Inspector panel, use the plus icons to add a column to the right or row to the bottom of your grid.
Click the dropdown arrows to adjust the column and row measurements. Each one has 3 dots next to it where you can delete the row or column, or add a new one on either side.
You can also set gaps between rows or columns.
Note: Changes you make to the grid from the Inspector panel affect the size and positioning of the content inside..
Adjusting the grid on the canvas
From the floating action menu, choose Customize grid on canvas. Changes you make in this mode don’t affect the content in the grid.
In this mode you can drag to adjust existing grid lines, or drag from the left or top to add new ones.
Click Done when you’re finished editing.
When you add an element to a grid cell, it automatically docks to the nearest vertical and horizontal gridlines.
Dock elements to control their position and prevent overlap at smaller screen sizes. Learn more about docking and margins here.
Stretching across cells
Stretch elements such as images and containers across one or more grid cells to fill an entire area.
You can drag and drop, or position elements using the Inspector panel under Location in grid cells.
Select the element you want to position. You can see which grid cell it’s placed in, and click on the box that corresponds with the cell you want to move it to. Position elements in more than one cell by holding down shift while you select the cells.
You’ll see the column and row numbers update according to the element’s new position.
Go to View to toggle the Grid Measurements on or off. When they’re toggled on, you can see the measurements next to each row and column. Click the measurements to adjust them. Between the grid measurements, you can click on the plus icons to add additional rows and columns.
Grid offers different units of measurement that affect how your content responds to changes in viewport width. Learn more about measurements here.
EXPLORE MORE TUTORIALS
Was this lesson helpful?
Thank you for your feedback!