Rows are sections of your Joomla articles. Rows are also containers for columns. Each row can have a fixed, full, or fluid width and can contain from 1 to 12 columns. Rows can have background color or image. There are multiple parameters for each row that we will explain here.
Rows divide your Joomla articles into horizontal sections. We will give you a few example rows, so you can have a better idea about what rows are and what they are used for.
The first row is the simplest possible row. It contains only one column and a single block inside.
The next row contains two columns. In the row settings, we set light blue background color and the full width of the row (row uses the full width of the screen).
The next row contains three columns. In the row settings, we set light red background color and the fluid width of the row (row and columns use the full width of the screen).
Adding Rows
You can add an unlimited number of rows to a page by clicking the Add Row button located at the bottom of the page. Each new row is added as the last row to the page layout (you can move it up later). When you click the Add Row button, a window with commonly used layouts opens. Click on a layout icon will create a new row at the bottom of the page.
Row Settings
Access the Row Settings window by clicking the bigger cog (titled Row Settings). Each row has its own independent settings.
Explanations of each of the options from the screen above are following.
Row ID
This field is automatically generated when you create a row. You can change it, but it's not necessary and not recommended. This field must not be empty. Also, it must be unique for each row on a page.
Row Class
Add a class name to your row in order to style it in your template's CSS file.
Full Width
If you enable this option, the row will use the full-screen width. This won't work well if you are using a template with left or right columns.
Fluid Width
If you enable this option, and if Full Width option is enabled as well, the row and its columns will use the full-screen width. Again, this won't work well if you are using a template with left or right columns.
Background Image
You can select or upload a background image for the row. To use this in front-end, you must enable option Content > Articles > Options > Editing Layout > "Frontend Images and Links".
Background Color
Select a background color for the row.
Background Image Repeat
Row background image will be repeated if it's smaller than the row width. You can also select not to repeat it, or to repeat it only horizontally or only vertically.
Background Image Position
The row background image is positioned top left by default. You can also select a different positioning for the background image.
Background Image Size
The row background image size depends on the image size by default. You can also select to cover the row with a background image or to contain the image.
Background Image Attachment
By default, the row background image will be scrolled with the rest of the content when the user scrolls the page. However, it's also possible to make the background image fixed.
Margin
Explicitly sets the margin values to the row. You should enter a value and units. For example, valid values are 15px, 1%, 1em, etc.
Padding
Explicitly sets the padding values to the row. You should enter a value and units. For example, valid values are 15px, 1%, 1em, etc.
Columns on Tablet
Set how many columns this row will have on the tablet screens. By default, it's set automatically to make your page responsive. However, you can set the number of columns on tablet screens for the row explicitly here. The value should be equal to or less than the actual number of rows.
Columns on Smartphone
Set how many columns this row will have on the smartphone screens. By default, it's set automatically to make your page responsive. However, you can set the number of columns on smartphone screens for the row explicitly here. The value should be equal to or less than the actual number of rows.
Copy Row
Click the Copy Row icon and this row will be duplicated instantly. All content of the row (columns and blocks), as well as the row settings, will be copied as well. The duplicated row will be independent of its source row.
Add a Column
If you created and a row with, for example, two columns and then changed your mind and want, for example, three columns, you can add a column by clicking the plus icon. Before you do that, you must make some space for the additional column. You can do that by reducing the widths of the existing columns in the row (each column has icons that reduce or increase its width).
Move Row
You can move the entire row and its contents up and down on the page. Just click on one of the icons titled Move Up and Move Down. You can also drag a row and drop it to the new position.
Delete Row
Clicking the trashcan icon will delete the row and also its contents (columns and blocks). So, be careful with this operation! If you want to keep some of the blocks from row you are about to delete, move them to another row first.