Add and configure grids
When you create a component, it is by default a single section, containing a grid made of 12 columns and 5 rows.
Add additional sections to a component
By default, a component has one section but you can add more sections to it and then you can configure the grid for each section independently.
To add an additional section to a component:
-
In the Component builder, click on the component canvas, outside of the elements if there are any already in the section.
-
In the Section context toolbar, click Add element > Section.
-
To add a new section above or below the current section, move the cursor either towards the top or the bottom of the current section, until you see the grid cursor highlighted
, and then click.
You can delete additional sections by clicking 
. Deleting the last section clears the grid from any elements previously added to it.
Configure the grid of a section
By default, the grid of a section is made of 12 columns and 5 rows, but it is possible to configure it to remove columns and add or remove rows.
The number of columns in the grid are often used for responsive design. For example, you can build different versions of a component using a grid with 12 columns for large devices, 8 columns for medium-sized devices, and 4 columns for small devices.
The number of rows simply depends on the design of the component: tall components require more rows. When the number of row is not adjusted correctly, there will be empty unused space in the component, or inversely, users will have to scroll to see the bottom of a component.
To configure a section:
-
Change the number of columns and rows using the Section configuration option in the right-hand pane.
-
Change the number of rows by dragging the double arrow located below the section up or down.
Make a row expandable
Elements drawn on the default grid have an absolute size, and if the element contains multiline content that exceeds the size of the element, it might be cut off. For this reason, when an element includes mapped content, we recommend that you define one or more expandable rows in the grid so that the container built on an expandable row automatically grows to accept the content.
To make a row expandable:
-
In the Component builder, click on the component canvas, outside of the elements if there are any already in the section.
-
In the left-hand pane, in the Layout & alignment, click Grid sizing.
-
In the Expandable rows section, click Make a row expandable.
-
In the drop-down menu, choose which row you want to make expandable. You can specify a row based on its position in the grid (first, middle, last) or based on the row number (row 3, for example).
You can recognize the expandable row because it has a light gray highlight.