Rows and columns

When to use

You will often want to divide content on a page into columns. This is often seen when creating a navigation panel or when trying to fit content above the fold to make it more immediately accessible to users. The row and column shortcodes enable you to make appealing layouts with ease!

Grids

Our rows and columns are based on a CSS grid system. Basically, every row is made up of a maximum of 12 column widths.  You can combine these column widths to produce columns of various widths. The only constraint is that all of the column widths in a row should add to 12. Otherwise, strange things can happen. You can have many rows on a single page, and you can have rows within rows as well (nested rows).

Rows

[row][endrow]

[row][endrow] are paired shortcodes that tell WordPress to expect columns. Any layout area must begin with [row] and end with [endrow]. The row shortcodes have no attributes.

Columns

[column number="aNumber"][endcolumn]

Every column in your grid will begin with [column number="aNumber"] and end with [endcolumn]. The number attribute determines the width of the column. The value number must be a positive integer and in any row, the values of the number attributes should add to 12.

Putting it together

Two equal width columns

1. Open a new row:
   [row]
2. Decide how many columns you want. Here we want 2 columns of equal length:
   [column number="6"]Column 1 Content[endcolumn][column number="6"]Column 2 Content[endcolumn]
3. Close the row:
   [endrow]

Results

Note: By default columns and rows do not have borders or backgrounds. Here we use the [pane] shortcode to help visualize the grid.

Two rows: one with 25%/75% columns another with 75%/25% columns

1. Open the first row:
   [row]
2. We want the first column to be 25%: 25% of 12 is 3, so the number attribute of our first column should be 3. 75% of 12 is 9, so the number attribute of our second column should have the value 9. the total column-width is 3 + 9 = 12
   [column number="3"]Row 1 Column 1 Content[endcolumn][column number="9"]Row 1 Column 2 Content[endcolumn]
3. Close the first row:
   [endrow]
4. Open the second row:
   [row]
5. We flip the attribute vales from 3/9 to 9/3 to get our 75%/25% columns
   [column number="9"]Row 2 Column 1 Content[endcolumn][column number="3"]Row 2 Column 2 Content[endcolumn]
6. Close the second row:
   [endrow]

Results

Nested columns

Occasionally, you will need to sub-divide columns. This can be easily accomplished with our shortcodes. Here we create two 50% columns in one row. In the first column of that row, we create two nested rows of three equal columns.

1. Open a new row:
   [row]
2. Open the first column
   [column number="6"]
3. Open the first nested row:
   [row]
4. Add the nested columns:
   [column number="4"]Row 1, Column 1, Nested Row 1, Column 1 Content[endcolumn][column number="4"]Row 1, Column 1, Nested Row 1, Column 2 Content[endcolumn][column number="4"]Row 1, Column 1, Nested Row 1, Column 3 Content[endcolumn]
5. Close the first nested row:
   [endrow]
6. Open the second nested row:
   [row]
7. Add the nested columns:
   [column number="4"]Row 1, Column 1, Nested Row 2, Column 1 Content[endcolumn][column number="4"]Row 1, Column 1, Nested Row 2, Column 2 Content[endcolumn][column number="4"]Row 1, Column 1, Nested Row 2, Column 3 Content[endcolumn]
8. Close the second nested row:
   [endrow]
9. Close the first column:
   [endcolumn]
10. Add the second column of the main row:
    [column number="6"]Row 1, Column 2[endcolumn]
11. Close the main row:
    [endrow]

Results