Components | Row
"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
PROPERTY
DESCRIPTION
Width
The row occupies 100% of the available space by default, but size can be changed to "Full", that is, size can be adjusted to fit the central column width.
Right margin
This property allows defining where the right margin should finish.
-
None: Default option.
-
level 1: The margin is aligned to one side of the central column.
-
level 2: The margin exceeds 50px the side of the central column.
-
level 3: The margin exceeds 100px the side of the central column.
If we combine the "Right margin" with the "Left margin" property, we can configure the same margin for both sides of a row. 
Left margin
This property allows defining where the left margin should start.
-
None: Default option.
-
level 1: The margin is aligned to one side of the central column.
-
level 2: The margin exceeds 50px the side of the central column.
-
level 3: The margin exceeds 100px the side of the central column.
If we combine the "Left margin" with the "Right margin" property, we can configure the same margin for both sides of a row. 
Background image
This property allows adding a background image for the row. We will click on "Examine" to access the unit Resources folder (check here), and select the image we want to show. Supported image formats: jpeg, png, and gif.
Background colour
This property allows adding a background colour for the row. If we add a "Background image", this will prevail over the background colour.
Column properties
PROPERTY
DESCRIPTION
Size
This is the size occupied by a column inside a row. Columns can occupy 1-12 spaces.
Offset
This option allows creating a breaking space on the left of the column, which can be visually noticed. Offset can have 1-12 spaces.
It's the last column
This property allows marking a column as the last one within a row. This means that the second column will be placed below the first column, so that the third column appears as the last one within the row. This example shows that more options could have included in the first row, but we decided to insert them in the next row.