"Row" is one of the most adaptable and interesting components offered by the Tokyo template. This component allows inserting "Columns" to order the rest of components. So, we can decide to display the information divided into columns. We would find a similar layout in newspapers, for instance.

Rows can be divided into 12 columns. We can add "Columns" to occupy 1-12 out of all the spaces available. For instance, we can add two symmetrical columns (6 spaces each), three symmetrical columns (4 spaces each), etc. We can also create asymmetrical layouts consisting of columns with different layouts.

Rows are added within the screens by default (See here), but they can also be added inside other components (for example, a Pop-up, an Accordion, a Row, etc.).
You will find this component in the group of "Cataloguer" components.

When we add a row, we can choose different preset structures that will help us when editing contents.

Setup process

1. Check the selected row (you can check this quickly from the breadcrumb trail), access the "Add" tab and, if needed, include new "Columns".

2. Access the "Properties" tab in the row and configure its properties (see the list of properties at the bottom of this page). Properties used to choose a background image or colour for the row are interesting. It is also possible to let the row width exceedthe central area of the screen.

3. Columns we created include a text by default, but there are also other components we can insert in the column. We select the column (the easiest way to do this is through the breadcrumb trail), access the "Add" tab and choose one of the components to "Insert inside" the column. Remember you can go to "Insert after" and add another column after this column.

4. Finally, access the "Properties" tab in the column. For example, this tab allows you to assign a width to each column included inside the row (1 to 12 spaces).

Row properties

Column properties