{"id":183,"date":"2019-08-24T08:10:52","date_gmt":"2019-08-24T12:10:52","guid":{"rendered":"http:\/\/www.marshall.edu\/website\/?page_id=183"},"modified":"2026-03-02T13:59:40","modified_gmt":"2026-03-02T18:59:40","slug":"columns","status":"publish","type":"page","link":"https:\/\/www.marshall.edu\/marsha\/columns\/","title":{"rendered":"Columns"},"content":{"rendered":"

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).<\/p>\n

On small screens, columns default to full width and stack vertically.<\/p>\n\n\t\n\n\t

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

Understanding Columns and Responsive Design<\/h2>\n

Assume we have three columns, each set to 12 on small and 4 on large. This is how they display:<\/p>\n

On Desktop\/Laptop Screens<\/h3>\n
\n
Col 1<\/div>\n
Col 2<\/div>\n
Col 3<\/div>\n<\/div>\n

On Mobile<\/h3>\n
\n
Col 1<\/div>\n
Col 2<\/div>\n
Col 3<\/div>\n<\/div>\n

Row Shortcode<\/h2>\n

mu_row Parameters<\/h3>\n

[mu_row]<\/code> has no required parameters. It acts as the flex container for the columns inside it.<\/p>\n

Column Shortcode<\/h2>\n

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

    Column Shortcode Examples<\/h2>\n

    Two Equal Columns<\/h3>\n\n
    \n\n\t\t\t
    \n\t\t\t
    \n\t\n
    \n
    \nLeft Column\n<\/div>\n<\/div>\n\n
    \n
    \nRight Column\n<\/div>\n<\/div>\n\n\n<\/div>\n\n\t\t<\/div>\n\t\n\t
    \n\t\t
    \n\t\t\tShortcode<\/span>\n\t\t\t copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t