Marsha Docs

Columns

The columns shortcode is two shortcodes used together: a row wrapper and one or more columns inside it. Columns split the page into a 12-unit grid. To create two equal columns on desktop, assign each a large value of 6 (6 + 6 = 12). For three equal columns, use a value of 4 each (4 + 4 + 4 = 12).

On small screens, columns default to full width and stack vertically.

For displaying groups of cards, icon boxes, link cards, or rankings side by side, use their dedicated wrapper shortcodes ([mu_cards], [mu_icon_boxes], etc.) instead of columns. Columns are best reserved for mixed content layouts.

Understanding Columns and Responsive Design

Assume we have three columns, each set to 12 on small and 4 on large. This is how they display:

On Desktop/Laptop Screens

Col 1
Col 2
Col 3

On Mobile

Col 1
Col 2
Col 3

Row Shortcode

mu_row Parameters

[mu_row] has no required parameters. It acts as the flex container for the columns inside it.

Column Shortcode

mu_column Parameters

  • Small Screen Width (sm): Optional. Width on small screens (phones). Defaults to 12 (full width). Only in very rare circumstances should this be anything other than 12.
  • Large Screen Width (lg): Width on desktop screens (1024px and wider). Based on 12 units — a value of 6 is 50%, 4 is 33%, 3 is 25%. Never set this to 12 — nothing will display.

Column Shortcode Examples

Two Equal Columns

Left Column
Right Column
Shortcode 
[mu_row]
[mu_column sm="12" lg="6"]Left Column[/mu_column]
[mu_column sm="12" lg="6"]Right Column[/mu_column]
[/mu_row]

Three Equal Columns

Left Column
Middle Column
Right Column
Shortcode 
[mu_row]
[mu_column sm="12" lg="4"]Left Column[/mu_column]
[mu_column sm="12" lg="4"]Middle Column[/mu_column]
[mu_column sm="12" lg="4"]Right Column[/mu_column]
[/mu_row]

75% / 25% Split

Main Content
Sidebar
Shortcode 
[mu_row]
[mu_column sm="12" lg="9"]Main Content[/mu_column]
[mu_column sm="12" lg="3"]Sidebar[/mu_column]
[/mu_row]