Rows and Columns
A walk through of using rows and columns in your layout.
Rows and columns are fundamental concepts used in laying out your canvas. Think of them as building blocks. They help organize content in a structured and responsive manner, ensuring that elements are aligned and properly spaced regardless of the device or screen size.
What Are Rows?
A row is a horizontal grouping of content on a page. A row typically spans the full width of the container it's within, dividing the space horizontally. Rows are used to contain and organize columns, ensuring that they align correctly on the horizontal axis.
Characteristics of Rows:
Full-Width Container: A row usually extends across the entire width of its container.
Organizational Unit: Rows are used to group related columns together, maintaining horizontal alignment.
Layout Control: Rows help control the flow and structure of content, often used to separate different sections or horizontal bands of content.
Location in the Parts Library: Base Parts > Layout > Row
What Are Columns?
A column is a vertical subdivision within a row. Columns are used to divide the row into smaller, manageable sections, allowing content to be organized and aligned vertically. Columns are defined with spans that add up to the full width of the row.
Characteristics of Columns:
Vertical Division: Columns split a row vertically into segments.
Responsive Design: Columns can be responsive, adjusting their width and stacking behavior based on the screen size.
Content Organization: Columns are used to organize content into discrete vertical sections, ensuring proper alignment and spacing.
Location in the Parts Library: Base Parts > Layout > Col
An Example of Rows And Columns
In the example below, we have one row with two columns in it. There is content in each column. Each has an image, and some pieces of text. You'll notice that the columns are sized such that they are responsive on different device sizes.
Adding Rows and Columns
In the parts library, there are base parts so you can add rows and columns, including preconfigured and responsive combinations of these to help with making layouts quicker and easier. Some examples include:
a default (blank) row
a row with a column
a row with two columns, and other combinations with additional columns
some examples of multiple rows with columns
some examples of rows with columns containing cards, various spacing, and other common properties applied
Some examples from the parts library are shown below.
The parts, when blank, are shown with faint hashed lines so you can see where you've added them to your canvas. The hashed lines disappear once you've added content.
Sizing Columns, and Column Span
When starting from a base row and adding a base column, the column doesn't have a size and will expand based on the content added to it. To size the column, select the column to activate the property editing panel on the right.
The example below shows a row with a blue background color. A column has been added to the row. The column initially only takes up a small amount of space because it is yet to have content added. When an image is added to the column, the column expands to fill the row because the image is large enough to do that. Then, the column is selected and sized, giving it a span of six, meaning it takes up half the size of the row.
Appeggio assumes that the span of any screen is twelve cells.
Setting a column to a span of twelve therefore means that the column takes the full width of the screen. Likewise, a column with a span of six takes up half of the screen; a column with a span of four takes up a third of the screen; and a column with a span of three takes up a quarter.
Below is an example of a row containing six columns. You'll see that on the XL screen size, there are six columns each with a span of two, filling the width of the screen. In the LG screen size, the columns each span four (resulting in three columns fitting across the screen, and stacking the next three columns underneath), the SM size columns each span six (resulting in two columns fitting across the screen, and stacking the rest underneath), and the XS columns each span twelve (resulting in only one column fitting across the screen, all stacking on top of each other).
Alignment of Rows and Columns
There are lots of different alignment options to help you with the layout of rows and columns.
Horizontal alignment deals with the positioning of parts along the horizontal axis. It determines how parts are placed from left to right within a container.
Vertical alignment deals with the positioning of parts along the vertical axis. It determines how parts are placed from top to bottom within a container.
There are gifs to demonstrate each of the properties to align your rows and columns here.
Alignment of Columns
Horizontal Alignment
Horizontal alignment refers to the placement of text or other parts along the horizontal axis of the column. Columns and text can be horizontally aligned to the left, center, right, and justified.
Vertical Alignment
Vertical alignment refers to the placement of text or other parts along the vertical axis of its parent container. Columns can be vertically aligned to the top, center, and bottom. They can also be stretched, aligned to be auto, and to align the contents to the baseline in comparison to other contents in the container.
Alignment of Rows
Horizontal Alignment
The horizontal alignment of rows can be done based on the contents of the row, or the row itself.
Horizontal Alignment - Contents
Horizontal alignment refers to the positioning of the contents (including child elements) of the row along its horizontal axis. Contents can be horizontally aligned within the row to the left, center, and right. They can also be horizontally aligned so there is space between the contents, space around the contents, and content distributed evenly.
Horizontal Alignment - Self
The horizontal alignment of a row refers to how the row itself is positioned within its container (its parent part) on the horizontal axis. The width of the parent container is therefore important. The row itself can be horizontally aligned within its container to the left, the center, and the right. They can also be stretched, and aligned to be auto.
Vertical Alignment
The vertical alignment of rows can be done based on the contents of the row, items in the row, or the row itself.
Vertical Alignment - Items
Vertical alignment of items within a row refers to the positioning of child elements along the vertical axis inside the row. Items can be vertically aligned within the row to the top, the center, and the bottom. They can also be stretched and aligned to the baseline in comparison to other contents in the container.
Vertical Alignment - Content
Vertical alignment of the contents within a row refers to how child elements are positioned along the vertical axis inside a container. Content can be vertically aligned within the row to the top, the center, and the bottom. They can also be vertically aligned so there is space between the contents, space around the contents, and content distributed evenly.
Vertical Alignment - Self
The vertical alignment of a row refers to how the row itself is positioned within its container (its parent part) on the vertical axis, if the row is in a flexible container (such as another row). The height of its container is therefore important. The row itself can be vertically aligned within its container to the top, the center, and the bottom. The row can also be stretched, aligned to be auto, and to align the contents to the baseline.
Adding Parts to Rows and Columns
Once your row or column is in place, you can add any part or section from the parts library by choosing the appropriate part and clicking '+ add to page'.
Formatting Rows and Columns
Spacing - Margins, Padding and Gaps
Ensuring that you have appropriate spacing within and around your layout parts is crucial to the look and feel of your app. Spacing directly affects the layout, readability, and overall user experience of an app.
Rows and Columns each have a Spacing Editor. Padding (space within a part) and margin (space around a part) can be applied to rows and columns. Gaps can also be applied to rows.
Borders and Decoration
Like many other parts, borders, shadow, opacity, rounding, and spacing can be applied to rows and columns using the property editor on the right, once the part has been selected.
Background Images
A background image can be added to a row or a column. To do this, select the part, then go to the Image property editor in the right panel. Select an image from the Media Gallery, or upload a new image from your device.
Adding a Background Image to a Row or Column
To add a background image to your row or column, select the row or column, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the opacity of the background image within the Decoration Editor as needed.
The image will take up the full background space of the row or the column.
Colors and Color Gradients
Colors and color gradients can be applied to rows and columns also. It's important to note that when setting the foreground color of a row or a column, the contents within the row or the column where the foreground color is applied will adopt that color for all its contents, provided that the color has not already been set for particular parts.
In the example below, there is a column with three pieces of text and a button. The column is centered within a row. A background color of pale blue is applied to the column, filling the background of the column. A foreground color of green is applied to the column, resulting in all of the text parts being shown as green. The arrow button remains blue because the button was specifically assigned the color blue. Then, a background color was applied to the row.
Related Information
Last updated
Was this helpful?