Layout Columns & Grids Last Updated July 2026 Layout of the content in the body area of a Page or Post can be designed with the following Design Blocks in the Block Editor. (Other areas of the page are configured in the Theme and Templates or by Plugins and Widgets. You’re unlikely to need the more advanced template, plugin and widget options, but if you do, just reach out to the College web team.) The following Block Types allow content builders to divvy up regions in the content area or full page area into columns and rows and place other kinds of blocks within the regions. Remember that data tables should never be used for layout. As with all blocks, be sure to click to see the Settings Sidebar where you’ll find settings for the specific Block you are working with. The block settings lets you change the layout, transform the blocks and even add a background color to either the entire grid or a single block. Please consider accessibility, especially color contrast, and UT’s Brand before changing any colors. On this page: Responsive Design Columns Grid & Group Blocks Transform Layouts from one to another Learn More Responsive Design Remember that the layout you create will look different on a Desktop screen and a mobile phone. It is especially important to review how the page layouts you create responds on a variety of devices. Columns The Columns block gives content builders the ability to add up to a six column layout. Place your cursor in the Body field where you want the layout to begin. Type /columns or click the Add Block button and select the Columns block. Select a layout – you can always change it or add more columns later. Click the Add Block button in each column to add content. The great thing about the Columns block is you can add multiple block types into each of the columns. Adding and removing columns You can add more columns one of two ways: Hover your mouse in between columns until the Add Column button appears. Click outside the box to select the entire Columns block and you can adjust the number of columns in the block settings. Block toolbar The Columns block has a toolbar that lets you change alignment or move the blocks within the column up or down. Each column also has its own toolbar. To change the position of the columns, you can either click the arrows in the toolbar or press and hold the drag button to move the column to its new position. Grid & Group Blocks Grid & Group Blocks allow you to adjust the height, width, and position of the columns and rows for more control of both the vertical and horizontal layout. Grid Block – can be used to organize multiple blocks in a grid format. Group Block – functions similarly to the Grid Block. Stack Block – nests other blocks vertically. Row Block – arranges blocks horizontally. Example of a Grid Block Place your cursor in the Body field where you want the layout to begin. Type grid or click the Add Block button and select the Grid block. In the first section, click the add block button and choose a block type. To continue adding blocks to the grid, click the Add Block button in the lower right-hand corner of the grid. You can also hover your mouse in between blocks until the Add Block button appears. Block toolbar The toolbar gives you the following options: Transform to which you can read about below. Moving handles Options Moving handles The drag button lets you drag and drop a block within the container. The arrow icons shift a block up or down in your document. Options The Options button on a block toolbar gives you more features to customize the block. You can read about these settings on the WordPress documentation site. Teams The “Teams” plugin is another option that allows you to create rows and columns in a responsive grid layout. The typical use of the plugin is for creating a directory of people but it can be used creatively to solve many other layout needs. To enable this plugin, contact the web team. Transform It’s possible to transform from one type of Design Block to another, for example from a Grid to a Group, without changing the content of the blocks contained within. You can also select a block and transform it into the content region of a Design Block. Click on the “Transform” button Learn More More detailed information about the Columns block and Grid block along with demo videos can be found on the WordPress documentation site.
