Grid containers are great for creating a symmetrical design, but they can be somewhat constrictive. The span content feature gives you greater flexibility with the grid layout, allowing content to span across multiple cells and giving you the ability to create complex layouts within a grid.
Span content across multiple cells
Spanning content across multiple cells gives you greater design flexibility. For instance, you can create an image gallery with pictures of various sizes.
To span content across multiple cells:
- Create a Grid. For this example, we’ll create a 4 by 2 grid.
For details, see Create a Grid container. - Drag an image widget to the first cell, the one in the upper left.
- Add content to the widget. For details, see Image widget.
- Click the Advanced tab.
- In the panel, in the Grid Item section, use the Column Span dropdown menu to select 2.NoteWhen we changed the Column Span, it affected the height of the cell. As you can see if you look at the empty cell, this change affects all the cells in the grid because all cells in a grid are the same size.
- Use the Row Span dropdown menu to select 2.
The Image widget takes up four cells.NoteThe image appears to stay the same size, however it now takes up four cells instead of two. This affects the size of the cells as you can see from the empty cell.
- Drag an Image widget to the empty cell and add an image.
- In the Advanced tab of this image, change the Column Span to 2.
Now, let’s add another image and create a blank area in the gallery. Normally with a grid, you can’t have blank cells, but custom spanning allows this.
- Add another image to the grid.
- In the Advanced tab, use the Column Span dropdown menu to select Custom.
- In the text box enter 4.
This custom setting means the image will start at the fourth vertical line or the end of the second column. See below for more information about the custom setting.
Using the custom field
The Column Span and Row Span dropdown menus contain numeric values as well as a Custom field. Selecting Custom allows you to control spanning by entering code instead of selecting a number from the dropdown menu.
If you want to use the Custom field:
- Create a Grid container and add a widget.
- Go to the Advanced tab of the selected widget.
- Using the Column Span dropdown menu or the Row Span dropdown menu, select Custom.
- Use the text box to enter code to span the widget.
Examples of custom code for spanning widgets:
- Span 2: Span across 2 rows or columns.NoteIn the codes below, the numbers refer to the lines that border containers (see the chart below for reference.
- 1 / 3: Span from the first line to the third line.
- 2 / 5: Span from the second line to the fifth line.
Custom codes give you increased flexibility, allowing you to create layouts that wouldn’t be possible using the standard numbers in the dropdown menu..
