Column Shortcodes

Display content in a responsive, 12-column grid. The columns are adapted from the Foundation framework and allow for small, medium and large screen column definitions. Note: Sites using the WordPress Block Editor (Gutenberg) should use the built-in Columns block instead of these shortcodes.

How It Works

This module includes two separate shortcodes: row and col. Both require an opening and closing shortcode in the format:

[row]
[col]
...
[/col]
[/row]

Shortcode Attributes

The attributes of the row shortcode include:

• class: (optional) specify CSS classes for the row (i.e class="text-center").

The attributes of the col shortcode include:

• small: specify number of columns this section should display based on the 12-column grid when viewing on small screens. Accepts any number from 1 to 12 (i.e., small="6").
• small_offset: specify number of columns this section should be offset based on the 12-column grid when viewing on small screens. Accepts any number from 1 to 12 (i.e., small_offset="3").
• medium: specify number of columns this section should display based on the 12-column grid when viewing on medium screens. Accepts any number from 1 to 12 (i.e., medium="6").
• medium_offset: specify number of columns this section should be offset based on the 12-column grid when viewing on medium screens. Accepts any number from 1 to 12 (i.e., medium_offset="2").
• large: specify number of columns this section should display based on the 12-column grid when viewing on large screens. Accepts any number from 1 to 12 (i.e., large="10").
• large_offset: specify number of columns this section should be offset based on the 12-column grid when viewing on small screens. Accepts any number from 1 to 12. (i.e., large_offset="1").

Shortcode Demos

1/3, 2/3 columns on screen and tablet, two equal columns on mobile

[row class="row-demo"]
[col medium="4" small="6"].medium-4.small-6.columns[/col]
[col medium="8" small="6"].medium-8.small-6.columns[/col]
[/row]

Two columns on screen and tablet, one column on mobile

[row class="row-demo"]
[col large="3" medium="6"].large-3.medium-6.columns[/col]
[col large="3" medium="6"].large-3.medium-6.columns[/col]
[/row]

Three columns on screen and tablet, two columns on mobile

[row class="row-demo"]
[col medium="3" small="6"].medium-3.small-6.columns[/col]
[col medium="3" small="6"].medium-3.small-6.columns[/col]
[col medium="6" small="6"].medium-6.small-12.columns[/col]
[/row]

Offset Columns

[row class="row-demo"]
[col large="9" large_offset="3"].large-9.large-offset-3.columns[/col]
[/row]

Nested Columns

[row class="row-demo"]
[col medium="6"].medium-6
	[row_row]
		[col_col medium="6"].medium-6[/col_col]
		[col_col medium="6"].medium-6[/col_col]
	[/row_row]
[/col]
[col medium="6"].medium-6
	[row_row]
		[col_col medium="6"].medium-6[/col_col]
		[col_col medium="6"].medium-6[/col_col]
	[/row_row]
[/col]
[/row]