<\/i> Button 1<\/a>\n<\/div>\n Behind the scenes, columns use a 12-block grid system. This flexible layout system allows you to mix and match column widths to create a variety of layouts. 1<\/p>\n<\/div>\n 2<\/p>\n<\/div>\n 3<\/p>\n<\/div>\n 4<\/p>\n<\/div>\n 5<\/p>\n<\/div>\n 6<\/p>\n<\/div>\n 7<\/p>\n<\/div>\n 8<\/p>\n<\/div>\n 9<\/p>\n<\/div>\n 10<\/p>\n<\/div>\n 11<\/p>\n<\/div>\n 12<\/p>\n<\/div>\n<\/div>\n You’ll never use all 12 columns as that would make each column too narrow to fit any content. Instead, combine grids to create more usable layouts. Assign up to 12 grids per column to define the width of each column. Most of the time, the columns have to add up to 12 (see below for exceptions).<\/p>\n Each column in the example below was assigned 6 grids (6 + 6 = 12).<\/p>\n QUESTIONS?<\/strong><\/p>\n<\/div>\n For questions or inquiries, contact email@med.unc.edu<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n TRAINING NEWS<\/strong><\/p>\n<\/div>\n Stay current on training opportunities The first column in the example below was assigned 4 grids and the second column was assigned 8 grids (4 + 8 = 12). You can assign however many grids per column so long as they add up to 12 (there is an exception that is explained below).<\/p>\n This 2-column layout is split 1\/3 and 2\/3. The first column uses 4 grids and the second uses 8 grids which adds up to 12.<\/p>\n<\/div>\n<\/div>\n Each column in the example below was assigned 4 grids (4 + 4 + 4 = 12).<\/p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel nibh pretium, luctus libero nec, tristique nunc.<\/p>\n<\/div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel nibh pretium, luctus libero nec, tristique nunc.<\/p>\n<\/div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel nibh pretium, luctus libero nec, tristique nunc.<\/p>\n<\/div>\n<\/div>\n In the editor toolbar, select Content Elements <\/strong>then choose Columns<\/strong>. <\/p>\n No of Columns<\/strong> – select how many columns you want in your layout.<\/p>\n Column Division<\/strong> – define how to divide the available space across the columns.<\/p>\n <\/p>\n Column Specification<\/strong> – this lets you control how wide each column is for different screen sizes – Large, Medium, Small, and X-small<\/strong>. This is important because what looks good on a desktop might not work on a phone. Customizing the column widths for each screen size ensures your content is responsive and easy to read on any device.<\/p>\n <\/p>\n The columns shortcode is a 12-grid system, which means each row has up to 12 grids available per screen size.<\/p>\n To create responsive layouts, you have two options:<\/p>\n To make the 4-column layout below responsive, I used the following settings:<\/p>\n Resize your browser window to see the responsive design in action.<\/p>\n <\/i>\n <\/i>\n <\/i>\n <\/i>\n This is what the settings look like:<\/p>\n <\/p>\n Adding center-content<\/strong> to the Custom Class<\/strong> field will center the content within all columns.<\/p>\n <\/p>\n Once you’ve defined the settings and clicked the Insert Columns<\/strong> button, shortcode will be place on your page.\u00a0 This shortcode is what defines your columns.\u00a0 It starts with an opening [row]<\/strong> tag and ends with a closing [\/row]<\/strong> tag.\u00a0 Within the row is code for each column.\u00a0 A starting column [column]<\/strong>\u00a0and ending [\/column]<\/strong> tag.\u00a0 Within each column tag is the word Text<\/strong>.\u00a0 This is placeholder text that you need to replace with your own content – images, headers, text, links, other shorcode such as buttons<\/a> or notification boxes<\/a>, etc. Be sure to keep all your content within the opening and closing [column]\u00a0 [\/column] tags.<\/strong><\/p>\n Be aware that the Cells plugin<\/a> offers several layout options that display content in columns. These are pre-designed templates where you simply drop in your content. In some cases, Cells layouts can be a quicker and more flexible alternative to using the columns shortcode. However, they may not always meet your exact design needs, so it\u2019s worth exploring both options to see which works best for your content.<\/p>\n Click on any image below for a larger version.<\/p>\n Some sites, such as the Department of Medicine and Lineberger, use columns to display a large quantity of links.<\/p>\n <\/p>\n Some sites use columns to display news and events side-by-side. Or, in the Faculty Affairs example, they display upcoming events and workshop recordings side-by-side using the columns shortcode.<\/p>\n <\/p>\n A lot of our sites like to nest other shortcode options, such as notification boxes<\/a>, buttons<\/a> and panel boxes<\/a>, inside of columns.<\/p>\n Below are some examples of the columns shortcode used to display a variety of content.<\/p>\n Columns can be used to lay out content side by side. For example, a 2-column layout is perfect for placing buttons, images, or text next to each other. Behind the scenes, columns use a 12-block grid system. This flexible layout system allows you to mix and match column widths to create a variety of layouts. … Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2212,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-7053","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/7053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=7053"}],"version-history":[{"count":41,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/7053\/revisions"}],"predecessor-version":[{"id":14413,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/7053\/revisions\/14413"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=7053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
\nExamples<\/h2>\n
2 Columns With the Same Width<\/h3>\n
\nJoin our training news email list<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n2 Columns of Unequal Width<\/h3>\n
![\"UNC's](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/old-well-02.jpg\")
<\/p>\n<\/div>\nThis is a Header<\/h3>\n
3 Columns With Equal Width<\/h3>\n
![\"\"](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2018\/03\/cardiology-600x467.jpg\")
<\/p>\nEducation<\/h3>\n
![\"\"](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2018\/03\/general-practice-600x467.jpg\")
<\/p>\nResearch<\/h3>\n
![\"\"](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2018\/03\/pediatrics-600x467.jpg\")
<\/p>\nPatient Care<\/h3>\n
\nHow to Add Columns<\/h2>\n
Insert Columns<\/h3>\n
\n![\"EBS](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2022\/05\/16AFC7AF-748B-4361-AA7D-233F78EDB42A_4_5005_c.jpeg\")
<\/p>\nConfigure the Columns<\/h3>\n
![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-shortcode-settings-01.png\")
<\/p>\n\n
![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-shortcode-settings-02.png\")
<\/p>\nResponsive Layout<\/h3>\n
\n
\n
Directory<\/h4>\n<\/div>\n<\/div>\n
Newsletter<\/h4>\n<\/div>\n<\/div>\n
Contact Us<\/h4>\n<\/div>\n<\/div>\n
Donate<\/h4>\n<\/div>\n<\/div>\n<\/div>\n
![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-shortcode-4-column-example.png\")
<\/p>\nCentering Content<\/h3>\n
![\"Screenshot](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-shortcode-center-content.png\")
<\/p>\nThe Shortcode<\/h3>\n
Alternative – the Cells Plugin<\/h2>\n
\nExamples On SOM Sites<\/h2>\n
Example 1<\/h3>\n
![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-lineberger.png\")
<\/a><\/p>\n<\/div>\n![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-medicine.png\")
<\/a><\/p>\n<\/div>\n<\/div>\nExample Two<\/h3>\n
![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-ihqi.png\")
<\/a><\/p>\n<\/div>\n![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-faculty-affairs.png\")
<\/a><\/p>\n<\/div>\n<\/div>\nExample Three<\/h3>\n
![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-kidney-center.png\")
<\/a><\/p>\n<\/div>\n![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-teacch.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n![\"A](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-urology.png\")
<\/a><\/p>\n<\/div>\n![\"A](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-teacch-2.png\")
<\/a><\/p>\n<\/div>\n<\/div>\nExample Four<\/h3>\n
![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-medicine-2.png\")
<\/a><\/p>\n<\/div>\n![\"A](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-psych.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-psych-2.png\")
<\/a><\/p>\n<\/div>\n![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/columns-example-web-guide.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"