{"id":365,"date":"2025-07-23T11:24:54","date_gmt":"2025-07-23T15:24:54","guid":{"rendered":"https:\/\/www.clarku.edu\/wordpress\/?page_id=365"},"modified":"2025-12-16T10:16:25","modified_gmt":"2025-12-16T15:16:25","slug":"columns-containers","status":"publish","type":"page","link":"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/","title":{"rendered":"Columns and containers"},"content":{"rendered":"\n<div class=\"wp-block-columns sidebar is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column sidebar-right is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"is-style-intro\">Most pages organize elements into columns or some other container, ClarkU has a few to choose from.<\/p>\n\n\n\n<p>When designing a page with different columns, it&#8217;s important to consider that at least a third of your visitors will be using a smartphone with a small screen.  Usually, the layout will &#8220;stack&#8221; so content in different columns appear further down the page.  But there is nuance.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><?xml encoding=\"utf-8\" ?><nav class=\"is-vertical wp-block-navigation is-content-justification-stretch is-layout-flex wp-container-core-navigation-is-layout-353c4f5a wp-block-navigation-is-layout-flex\" aria-label=\"Layout submenu\"><ul class=\"wp-block-navigation__container  is-vertical wp-block-navigation\"><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/www.clarku.edu\/wordpress\/layout\/anatomy-landing-page\/\"><span class=\"wp-block-navigation-item__label\">Anatomy of a landing page<\/span><\/a><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/www.clarku.edu\/wordpress\/layout\/anatomy-detail-page\/\"><span class=\"wp-block-navigation-item__label\">Anatomy of a detail page<\/span><\/a><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/\"><span class=\"wp-block-navigation-item__label\">Columns and containers<\/span><\/a><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/www.clarku.edu\/wordpress\/layout\/headers\/\"><span class=\"wp-block-navigation-item__label\">Page headers<\/span><\/a><\/li><li class=\" wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\" href=\"https:\/\/www.clarku.edu\/wordpress\/layout\/footers\/\"><span class=\"wp-block-navigation-item__label\">Footers<\/span><\/a><\/li><\/ul><\/nav>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">One column layouts<\/h2>\n\n\n\n<div class=\"wp-block-columns sidebar-right is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column sidebar-right is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Landing pages and stories are the most common uses for one column layouts, but any page can be one column. <\/p>\n\n\n\n<p>One column layouts allow you to take advantage of different alignments and create dramatic designs. When you create a blank page, by default, you&#8217;re working in a one column layout. It&#8217;s normal for a one column layout to have sections that contain two, three, or four columns as you move down the page \u2014 the University homepage is a good example.<\/p>\n\n\n\n<p>When working in a one column layout, ensure that text doesn&#8217;t get too wide. As you start typing your text will appear only as wide as a single column. But, if you place your text in a group, the group and everything in it will be as wide as the whole column. Use a two column layout within the group to maintain readable line lengths.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<aside class=\"wp-block-group boxout has-gray-100-background-color has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\"><div style=\"color:inherit\" class=\"eyebrow  has-text-align-left\">A note on accessibility<\/div>\n\n\n\n<p>Wide lines of text are hard to read.  A given line of text should not contain more than 80 characters.<\/p>\n<\/aside>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Two column layouts<\/h2>\n\n\n\n<div class=\"wp-block-columns sidebar-right is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column sidebar-right is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>ClarkU&#8217;s default two column layout is roughly two thirds on the left side, and one third on the right side.  But it&#8217;s not exactly thirds, so be sure to use the special class names of either <code>sidebar<\/code> or <code>sidebar-right<\/code>.  It&#8217;s OK if one of the columns is empty, in fact, it&#8217;s pretty common.  Don&#8217;t feel pressure to fill the space.<\/p>\n\n\n\n<p>You can also use two column layouts to display elements side-by-side in a 50\/50 design. A set of cards or boxouts is a good example of a two column layout.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other column layouts<\/h2>\n\n\n\n<p>ClarkU allows for customized page layout using columns.  You can choose the number of columns and their widths. Keep in mind that when some elements get very narrow, they can be less impactful or hard to read.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Containers<\/h2>\n\n\n\n<p>In addition to columns, there are other containers that offer variety in how messages are presented.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Grids<\/h3>\n\n\n\n<p>Use a grid to display a collection or related elements.  Grids look like columns, but it&#8217;s easier to add\/remove\/rearrange items within them because the entire collection reflows.<\/p>\n\n\n\n<p>On mobile devices, a grid will stay a grid, so elements inside might get quite small.  To make your grid &#8220;stack&#8221; on small screens, set a manual number of columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<aside class=\"wp-block-group boxout has-gray-100-background-color has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\">\n<p>ClarkU&#8217;s two-column layouts use special class names to enhance them on small screens: columns with the class <code>sidebar<\/code> show the right column first on small screens.  Use class <code>sidebar-right<\/code> to show the right column second.<\/p>\n<\/aside>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns sidebar-right is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column sidebar-right is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Text grid \/ matrix&#8230;<\/h3>\n\n\n\n<p>Use this element to display short and related pieces of information.  It&#8217;s very useful for displaying things like metrics, or short text blobs in a snackable side-by-side way.<\/p>\n\n\n\n<div class=\"wp-block-group matrix-wrapper is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns matrix is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-clarku-metric\">\n\t<div class=\"inner \">\n\t\t<div class=\"value \">\n\t\t\t64\t\t<\/div>\n\t\t<div class=\"description\">\n\t\t\t\n\n<p class=\"has-text-align-left\">Majors, minors, and concentrations.<\/p>\n\n\n\n<p class=\"arrow-link\"><a href=\"https:\/\/www.clarku.edu\/programs\/\">Find your program<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-clarku-metric\">\n\t<div class=\"inner \">\n\t\t<div class=\"value \">\n\t\t\t100%\t\t<\/div>\n\t\t<div class=\"description\">\n\t\t\t\n\n<p class=\"has-text-align-left\">of students complete an internship or experiential learning.<\/p>\n\n\n\n<p class=\"arrow-link\"><a href=\"https:\/\/www.clarku.edu\/academics\/the-clark-experience\/\">The Clark Experience<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group matrix-wrapper is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns matrix is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-clarku-metric\">\n\t<div class=\"inner \">\n\t\t<div class=\"value \">\n\t\t\t66%\t\t<\/div>\n\t\t<div class=\"description\">\n\t\t\t\n\n<p class=\"has-text-align-left\">Students receive need-based financial&nbsp;aid<\/p>\n\n\n\n<p class=\"arrow-link\"><a href=\"https:\/\/www.clarku.edu\/undergraduate-admissions\/cost-and-financial-aid\/\">Financial assistance<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-clarku-metric\">\n\t<div class=\"inner \">\n\t\t<div class=\"value \">\n\t\t\t9:1\t\t<\/div>\n\t\t<div class=\"description\">\n\t\t\t\n\n<p class=\"has-text-align-left\">Student-to-faculty ratio in the classroom<\/p>\n\n\n\n<p class=\"arrow-link\"><a href=\"\/faculty\/\">Our faculty<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Carousels<\/h3>\n\n\n\n<p>Carousels can display any type of content in a special, slide-defined interface. And while a carousel can display anything, they should be thematic: all panes in a carousel should relate to one another.  If you plan to use a carousel for photos only, consider using a Gallery instead.<\/p>\n\n\n<section class=\"splide cu_carousel\" id=\"cu_carousel_0\" aria-label=\"Basic Structure Example\">\n    <div class=\"splide__track\">\n        <div class=\"splide__list\">\n            \n\n<div class=\"wp-block-clarku-slide splide__slide\">\n<p style=\"padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">Carousels don&#8217;t perform well at the top of the page.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-clarku-slide splide__slide\">\n<p style=\"padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">Visitors scroll past them without even seeing what&#8217;s in the second slide.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-clarku-slide splide__slide\">\n<p style=\"padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">But once a reader is engaged, they&#8217;re more likely to flip through a carousel to learn more.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-clarku-slide splide__slide\">\n<p style=\"padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">So use carousels to get into details without taking up a lot of space, not as a way to display urgent messaging.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-clarku-slide splide__slide\">\n<p style=\"padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">Don&#8217;t take my word for it. <a href=\"https:\/\/shouldiuseacarousel.com\">Read the research on using carousels<\/a>.<\/p>\n<\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n<script>\n    let cu_carousel_0 = new Splide( '#cu_carousel_0',{\n        type   : 'loop',\n        perPage: 1,\n        perMove: 1,\n        focus  : 'center',\n        pagination:false,\n        updateOnMove: true,\n        gap:'2.5rem',\n        breakpoints: {\n            768: {\n                perPage: 1,\n                arrows: true,\n                pagination: false            },\n            1279: {\n                perPage: Math.min(2, 1) ,\n                arrows: true,\n                pagination: false            },\n        }\n    } );\n    cu_carousel_0.on( 'mounted', function () {\n        cu_carousel_0.Components.Slides.forEach(component => {\n\t\t\tcomponent.slide.style.alignSelf = 'start'\n\t\t})\n    } );\n    cu_carousel_0.mount();\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Galleries<\/h3>\n\n\n\n<p>Galleries are the easiest way to display a collection of photos. You choose the number of columns, and the computer does the rest. <\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69de186a70b56&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69de186a70b56\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"500\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"408\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg\" alt=\"A student wearing a Clarkie hat\" class=\"wp-image-408\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg 750w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie-300x200.jpg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69de186a71272&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69de186a71272\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"409\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-1024x682.jpg\" alt=\"a researcher studies plant roots\" class=\"wp-image-409\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-1024x682.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-300x200.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-768x512.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-1536x1024.jpg 1536w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69de186a71947&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69de186a71947\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"617\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"410\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1-1024x617.jpg\" alt=\"A laptop decorated with stickers\" class=\"wp-image-410\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1-1024x617.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1-300x181.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1-768x463.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1.jpg 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69de186a72009&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69de186a72009\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"411\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook-1024x651.jpg\" alt=\"students help clean up Beaver Brook\" class=\"wp-image-411\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook-1024x651.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook-300x191.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook-768x488.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook.jpg 1070w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/figure>\n\n\n\n<p>Tip: set a gallery to one column, and it&#8217;ll appear as a carousel.<\/p>\n\n\n<?xml encoding=\"utf-8\" ?><div data-splide='{\"type\":\"slide\",\"perPage\":1}' aria-label=\"Slideshow\" id=\"s0-46823500-1776162922\" class=\"has-nested-images columns-1 is-cropped is-layout-flex splide jonas-splide jonas-gallery\"><div class=\"splide__track\"><ul class=\"splide__list\"><li class=\"splide__slide\"><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"500\" data-id=\"408\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg\" alt=\"A student wearing a Clarkie hat\" class=\"wp-image-408\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg 750w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie-300x200.jpg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure><\/li><li class=\"splide__slide\"><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" data-id=\"409\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-1024x682.jpg\" alt=\"a researcher studies plant roots\" class=\"wp-image-409\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-1024x682.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-300x200.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-768x512.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-1536x1024.jpg 1536w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"splide__slide\"><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"617\" data-id=\"410\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1-1024x617.jpg\" alt=\"A laptop decorated with stickers\" class=\"wp-image-410\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1-1024x617.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1-300x181.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1-768x463.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/2022-Intro-to-Bioinformatics-1.jpg 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"splide__slide\"><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" data-id=\"411\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook-1024x651.jpg\" alt=\"students help clean up Beaver Brook\" class=\"wp-image-411\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook-1024x651.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook-300x191.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook-768x488.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/beaver-brook.jpg 1070w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Most pages organize elements into columns or some other container, ClarkU has a few to choose from. When designing a page with different columns, it&#8217;s important to consider that at least a third of your visitors will be using a smartphone with a small screen. Usually, the layout will &#8220;stack&#8221; so content in different columns [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":20,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-365","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Columns and containers - ClarkU WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Columns and containers\" \/>\n<meta property=\"og:description\" content=\"Most pages organize elements into columns or some other container, ClarkU has a few to choose from. When designing a page with different columns, it&#8217;s important to consider that at least a third of your visitors will be using a smartphone with a small screen. Usually, the layout will &#8220;stack&#8221; so content in different columns [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/\" \/>\n<meta property=\"og:site_name\" content=\"ClarkU WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T15:16:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/layout\\\/columns-containers\\\/\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/layout\\\/columns-containers\\\/\",\"name\":\"Columns and containers - ClarkU WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/layout\\\/columns-containers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/layout\\\/columns-containers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/uploads\\\/sites\\\/32\\\/clarkie.jpg\",\"datePublished\":\"2025-07-23T15:24:54+00:00\",\"dateModified\":\"2025-12-16T15:16:25+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/layout\\\/columns-containers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/layout\\\/columns-containers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/uploads\\\/sites\\\/32\\\/clarkie.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/uploads\\\/sites\\\/32\\\/clarkie.jpg\",\"width\":750,\"height\":500,\"caption\":\"A student wearing a Clarkie hat\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-json\\\/wp\\\/v2\\\/pages\\\/365#breadcrumbs\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":0,\"name\":\"ClarkU\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/\"},{\"@type\":\"ListItem\",\"position\":1,\"name\":\"ClarkU WordPress\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/\",\"name\":\"ClarkU WordPress\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Columns and containers - ClarkU WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/","og_locale":"en_US","og_type":"article","og_title":"Columns and containers","og_description":"Most pages organize elements into columns or some other container, ClarkU has a few to choose from. When designing a page with different columns, it&#8217;s important to consider that at least a third of your visitors will be using a smartphone with a small screen. Usually, the layout will &#8220;stack&#8221; so content in different columns [&hellip;]","og_url":"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/","og_site_name":"ClarkU WordPress","article_modified_time":"2025-12-16T15:16:25+00:00","og_image":[{"width":750,"height":500,"url":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/","url":"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/","name":"Columns and containers - ClarkU WordPress","isPartOf":{"@id":"https:\/\/www.clarku.edu\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/#primaryimage"},"image":{"@id":"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg","datePublished":"2025-07-23T15:24:54+00:00","dateModified":"2025-12-16T15:16:25+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.clarku.edu\/wordpress\/layout\/columns-containers\/#primaryimage","url":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg","contentUrl":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/clarkie.jpg","width":750,"height":500,"caption":"A student wearing a Clarkie hat"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/365#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"name":"ClarkU","item":"https:\/\/www.clarku.edu\/"},{"@type":"ListItem","position":1,"name":"ClarkU WordPress","item":"https:\/\/www.clarku.edu\/wordpress"}]},{"@type":"WebSite","@id":"https:\/\/www.clarku.edu\/wordpress\/#website","url":"https:\/\/www.clarku.edu\/wordpress\/","name":"ClarkU WordPress","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clarku.edu\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":20,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/365\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/365\/revisions\/596"}],"up":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/20"}],"wp:attachment":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}