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.
Alignment of Columns
Horizontal Alignment
Vertical Alignment
Alignment of Rows
Horizontal Alignment
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
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
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
Background Images
Adding a Background Image to a Row or Column
The image will take up the full background space of the row or the column.
Colors and Color Gradients
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?
