The Grid component is used to organize components into a repeating grid pattern. It’s similar to how the Gallery component displays images in a grid, except in this case you add different components instead of images. To get started, click on Add Content at the top of the website editor, then drag the Grid component to a page of your site. Next, click on the component to open the options panel to the side of the editor.
Add Content
To add content to the component, click the Add Content button at the top of the options panel. The grid will then refresh with the component added. To change the order of components in the grid, simply hover over a component, then click on the “handle” at the top of the component and drag it to a new position.
You can also drag components into and out of the grid component to the page itself.
Size & Position
The Width option in this group controls how much horizontal space the grid uses within the component. By default this is set to full, but you can change this to smaller proportions. If you do select a smaller proportion, you can then use the Align option to align the grid to the left, center, or right of the component. The Width option can be set separately for different screen sizes by clicking the desktop/mobile icon.
Layout
The options within the Layout group control aspects of the grid layout itself:
- Columns - This option controls the number of columns used by the grid, from as little as 1 to as many as 12. This can be set separately for different screen sizes.
- Gap - This option sets the space between each component in the grid, and can be set separately for different screen sizes as well.
- Justify Items - Item justification controls the placement of items within the component and also in relation to each other. Because it affects how space is distributed within the component, it is dependent on the number of items, columns, gap, and spacing - so you may need to adjust those to see more of a change.
- Align Heights - This option is toggled on by default, and will make all grid items the same height.
Design
Options within the Design group control the styling of the component and include the following options:
- Shape - By default this option inherits your site setting, but you can override it with this setting as well as set it separately for different screen sizes.
- Border - With this option you can add a border around the component and set the width, style, and color of the border.
- Divide - Can add a divider line in between items in the grid with this option, and set the width, style, and color of the divider.
Spacing
You can control overall spacing around the component with this option. Both Margin and Spacing provide options for all four sides of the component, and both can be set separately for different screen sizes by clicking their respective desktop/mobile icons.
Note that if you want to adjust the spacing around each individual item in the grid, simply click on the item in the editor to open its own options panel and look for spacing options there.