The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →The easiest way to create columns in WordPress is the built-in Columns block. In the block editor, click the + inserter, search for “Columns,” choose a layout such as 50/50 or 33/33/33, and place paragraph, image, heading, Cover, or Buttons blocks inside each column. You can then change the number of columns, set uneven widths, and stack the columns on mobile without writing CSS.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
This approach works well for game screenshots beside review text, feature comparisons, news-card grids, and call-to-action rows. Use a visual builder plugin only when you need site-wide templates, advanced responsive controls, or a full page-building system rather than a simple two-column section.
As an Amazon Associate I earn from qualifying purchases.
Use the WordPress Columns block first
The core Columns block is included with the WordPress block editor, so it does not add another builder layer to your site. It stores the layout as standard core/columns and core/column blocks in the post content. The theme still controls the final visual appearance, but the content remains portable as block markup.
Insert a column layout
- Open the post, page, or template where the layout belongs.
- Click the + inserter and search for Columns. Alternatively, add a new paragraph block, type
/columns, and press Enter. - Choose a variation. Common presets include two equal columns (50/50), three equal columns (33/33/33), and layouts with uneven widths.
- Click inside each child Column block and insert the content blocks you need.
- Select the parent Columns block when you want to control the whole row.
Each child column is a container, not a special text field. You can insert a paragraph, heading, image, Cover block, Buttons block, or another compatible block. For example, a game review can use a screenshot in one column and a heading, score explanation, and short paragraph in the other.
Pick the right preset for your content
Start with the simplest structure that gives your content enough room. Equal columns are predictable, while uneven columns are useful when one side has a clear primary purpose.
| Layout | Good use | Practical consideration |
|---|---|---|
| 50/50 | Screenshot beside review copy; two feature lists; before-and-after panels | Both sides receive the same width, so headings and images have comparable space. |
| 33/33/33 | Three game cards, service categories, or equal calls to action | Each column is narrower, so keep text concise and check the mobile version. |
| Uneven widths | Main article content beside a smaller note, price panel, or navigation aid | Give the primary content the larger share and verify that the narrow side does not wrap awkwardly. |
You can change the number of columns after inserting the block. If a three-column row feels cramped, reducing it to two is usually better than shrinking the type or forcing long buttons onto several lines.
Recommended Free Tools
Build a text-and-image section
To put text and an image side by side, insert a 50/50 Columns block, place an Image block in one child column, and add a heading and paragraph blocks to the other. The image can be on either side; use the arrangement that matches the reading order of the section.
Keep the two sides aligned
- Use a heading at the top of the text column rather than leaving an empty spacer block.
- Set a deliberate image aspect ratio or crop so a tall screenshot does not make the text appear stranded near the top.
- If the text side contains a button, add a Buttons block below the paragraph and set the button to 100% width when you want both columns to have an even visual edge.
- Preview the section with the actual game artwork and copy. Placeholder images often have different proportions from the final assets.
Every block remains editable in its own column. You can replace an image without rebuilding the row, or add a second paragraph and a button without changing the column structure.
Control widths, spacing, and appearance
Select the parent Columns block to expose controls for alignment, spacing, colors, typography, dimensions, borders, and shadows. The exact controls can vary with the active theme. Use the parent settings for a consistent row-wide treatment, such as a shared background color or border.
Set an individual column width
Click a child Column block rather than the parent. WordPress documents width values in px, %, em, rem, vw, and vh. Percentages are generally the most useful for a fluid two-column layout; fixed pixels can be appropriate for a small, intentionally fixed panel but need more testing at different viewport sizes.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Uneven widths should communicate hierarchy. A wide content column with a narrower summary column can work for a review page, while a narrow image beside a long explanation may make the image unreadable. Change one width at a time and inspect the row at desktop and mobile sizes.
Use the Styles and Advanced panels
The block sidebar’s Styles and Advanced panels can provide color, typography, dimensions, border, shadow, HTML anchor, and additional CSS-class controls. A theme may hide or add options, so the panel in your editor is the authoritative list for that site. An HTML anchor is useful when another part of the page must link directly to the row; an additional CSS class is useful when your theme or custom stylesheet targets a specific section.
Make WordPress columns responsive
The documented Columns workflow enables Stack on mobile by default. When enabled, the columns change from a horizontal row to a vertical sequence on smaller screens. This is the safest starting point for text-heavy sections because visitors can read each column at a comfortable width instead of getting a squeezed desktop layout.
Check the mobile order
- Select the parent Columns block and confirm that Stack on mobile is enabled.
- Preview the page at a narrow mobile width using the editor’s preview controls or a real phone.
- Read the stacked sequence from top to bottom. Put the most important content first, because the left column normally appears before the right column when the row collapses.
- Check headings, image crops, button widths, and paragraph spacing. A layout that looks balanced on a wide monitor can become excessively long or visually repetitive when stacked.
If two columns are both text-heavy, stacking is usually preferable to preserving a side-by-side arrangement. For a three-card grid, confirm that each card has a sensible order and that repeated buttons do not overwhelm the page.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Find and edit nested columns with List View
Columns contain child Column blocks, and each child can contain several more blocks. Selecting the correct level by clicking on the canvas can therefore be difficult. Open List View and expand the Columns block to see the parent and each child Column in a tree. Choose the parent to change row-wide settings or a child to change its width and contents.
List View is also useful when a block appears outside the intended column. Drag the misplaced block under the correct child Column in the list, or cut and paste it while that column is selected. This avoids adding empty spacer blocks merely to force alignment.
Troubleshoot common column problems
The columns look too narrow
- Reduce the number of columns, such as changing three columns to two.
- Shorten headings and remove unnecessary text from cards.
- Use an uneven layout that gives the primary content more width.
- Allow the row to stack on mobile instead of trying to preserve three narrow columns.
The mobile layout stays side by side
Select the parent Columns block and look for Stack on mobile. If the option is disabled, enable it and preview again. A theme’s CSS can also influence the final appearance, so check the published page at a real narrow width rather than relying only on the editor canvas.
You selected the wrong block
Use List View to distinguish the parent Columns block from an individual Column block. Parent settings affect the row; child settings affect one column. This distinction matters when changing widths, spacing, or background colors.
Spacing or colors do not match the editor
The core blocks save their structure in post content, while theme CSS affects the rendered result. Check the block’s Styles and Advanced panels, then inspect the active theme’s spacing and color presets. Avoid adding custom CSS until the built-in controls and theme settings have been checked.
Buttons have inconsistent widths
Inside each column, select the Buttons block and set each button to 100% width when the row needs a uniform button line. If full-width buttons make the row too heavy, use the natural button width and keep labels similar in length.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When a plugin builder makes sense
A plugin is optional, not a requirement for columns. It becomes useful when you are building many pages with reusable sections, need visual controls beyond the core block settings, or want a complete page-building workflow.
| Option | What it adds | Best fit |
|---|---|---|
| Native Columns block | Core editor workflow, equal or uneven presets, adjustable widths, nested blocks, mobile stacking, and standard block styling | A simple two-column section, a small grid, or a layout you want to keep close to WordPress core |
| Elementor | Visual drag-and-drop editing, responsive controls, templates, and custom CSS. Its free plugin covers core builder features; paid plans add capabilities such as Theme Builder, dynamic content, forms, popups, and ecommerce features depending on the plan. | Pages that need a visual builder and controls beyond the core editor |
| Beaver Builder | Front-end editing, responsive column layouts, reusable rows and columns, templates, a free Lite edition, and premium editions with more modules and global styles | Individuals, freelancers, or agencies standardizing reusable layouts |
| Spectra | A native-editor extension with responsive controls and additional patterns | Users who want to stay in the block editor while adding more patterns and controls |
Plugin builders introduce another system to maintain alongside WordPress and the theme. Before choosing one, confirm that the builder’s templates and responsive settings match your workflow and that you are comfortable keeping the plugin updated. A native Columns block is usually the lower-maintenance choice for a few rows on an otherwise standard site.
Choose a workflow for your site
Choose core Columns when
- You need one or two rows in a post, page, or template.
- Your content consists of standard blocks such as text, images, headings, Covers, and buttons.
- You want mobile stacking without designing separate desktop and mobile layouts.
- You prefer content saved as standard WordPress block markup.
Consider a builder extension when
- You repeatedly assemble the same multi-section landing page.
- You need reusable rows, templates, global styles, or dynamic content.
- You want front-end drag-and-drop controls instead of the standard editor sidebar.
- Your design requires responsive settings or modules that the core block does not provide.
For a gaming site, a practical progression is to build a screenshot-and-summary section with the core block, use a three-column row for short game features, and move to a builder only when the site needs a repeatable page system. That keeps simple content quick to edit while leaving room for a more advanced layout tool if the site’s requirements genuinely grow.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
