Table of contents10
Three years ago, I built a services page that looked perfect in the editor and like a car crash on the live site. Text overlapped images. Columns refused to line up. On mobile, everything stacked in the wrong order. I spent a full day nudging blocks around, and every fix broke something else. A developer friend looked at it for thirty seconds and said the words that changed how I build forever: “You are using Columns for everything. That is a Grid job.”
I am Mehmet Yilmaz, and I have spent years mastering the layout blocks inside the WordPress block editor. Here is what nobody tells beginners: WordPress gives you four different layout tools, Columns, Group, Row, and Grid, and each one exists for a different job. Use the wrong one and you fight the editor for hours. Use the right one and layouts practically build themselves. This is the master guide I wish someone had handed me on day one.
If you have ever dragged blocks around wondering why they will not behave, you are not bad at design. You are probably using the wrong layout block for the job. That confusion is the fear I want to end today. Here is my exact promise: this guide teaches you all four layout blocks, shows you exactly when to use each one with a simple decision system, and walks through real layout recipes you can copy, from pricing tables to card grids to magazine layouts. If you build pages in WordPress, this guide will save you hours every single week. Let’s master the grid.
You might think layout is about making things pretty. It is not. Layout is about making content understandable. The right structure tells visitors what matters, what belongs together, and where to look next, before they read a single word. Get the structure right and pretty follows naturally.
What You Will Learn
- Master the Columns block: presets, widths, and stacking
- Use the Group block as your section container
- Build horizontal arrangements with the Row block
- Unlock the Grid layout for auto-responsive designs
- Apply my decision system: the right block for every job
- Copy five real layout recipes for common page sections
- Fix the nesting and alignment mistakes everyone makes
Ready? Let’s get started.
The Columns Block: Your Everyday Workhorse
The Columns block is the first layout block everyone meets, and for good reason. It does one job beautifully: placing content side by side. Text next to an image. Three feature cards in a row. A testimonial beside a photo. If your layout idea starts with “I want these things next to each other,” reach for Columns first.
When you insert a Columns block, WordPress offers presets: 50/50 halves, 70/30 and 30/70 splits, three equal thirds, and more. These presets are starting points, not prisons. After inserting, select any individual column and drag its width slider in the settings sidebar to fine-tune the proportions. I start with the closest preset and then adjust by eye. A 60/40 split often looks better than a rigid 50/50 when one side holds an image and the other holds text.
Two settings deserve your attention. First, vertical alignment. By default, content in columns aligns to the top, which looks wrong when one column is much taller than the other. Select the Columns block and set vertical alignment to middle when you want side-by-side content optically centered, like text beside a video. Second, stacking on mobile. Columns automatically stack vertically on small screens, which is almost always what you want. Verify it in the mobile preview, but trust the default. It exists because the alternative, squeezed unreadable columns, is terrible.
Here is the limitation I promised to be honest about. Columns are rigid. They give you a fixed number of columns in a fixed arrangement. If you want a layout where items flow and wrap automatically, like a gallery of cards that reflows from four across to two across to one, Columns will fight you. That is Grid’s job, and we will get there. Use Columns when you know exactly how many side-by-side items you want. For everything fluid, keep reading.
Bonus Tip: You can nest blocks inside columns freely. A column can hold a Group, which holds a heading, an image, and a button. That nesting is how you build rich cards inside a Columns layout. But watch your depth. If you find yourself five levels deep, step back and simplify. Deep nesting makes layouts brittle and hard to edit later. The block editor workflows guide has more on keeping complex layouts manageable.
Columns handle the side-by-side. Now meet the block that holds entire sections together.
The Group Block: The Section Container That Holds Everything Together
If Columns are the rooms, the Group block is the building. A Group wraps any collection of blocks into one container you can style and move as a unit. Background color, padding, borders, spacing: everything you set on the Group applies to the whole section inside it. This is how professional-looking page sections are built. Not with individual styled blocks, but with Groups carrying the design.
My standard section recipe is always the same. Insert a Group block. Set it to full width or wide width so it spans the page. Give it a background color, alternating light and tinted sections down the page for rhythm. Add generous padding, 48 to 64 pixels top and bottom for major sections. Then build the content inside: a heading, a Columns block, whatever the section needs. The Group is invisible scaffolding. Visitors see a polished section. You see one movable container.
The Group block has a superpower beginners miss: layout variations. When you insert a Group, you can choose how its inner blocks flow. The default stacks them vertically. But you can switch the inner layout to Row or Grid, which changes how everything inside behaves. This is where the four layout tools start combining, and where real mastery begins. A Group with a Grid inner layout is my favorite way to build card sections, and I will show you exactly how in the recipes below.
Groups also solve the “move the whole section” problem. Without a Group, rearranging a section means selecting ten blocks and hoping you grabbed them all. With a Group, you grab one container and drag it. Every section on your page should live inside a Group. This single habit will save you more editing frustration than any other technique in this guide.
Note: Name your Groups in List View. Right-click a Group in the outline, rename it to “Hero Section” or “Pricing Section,” and suddenly your page outline reads like a table of contents. On a long page with twenty sections, named Groups are the difference between confident editing and anxious guessing. This takes seconds and pays off every time you edit.
Groups contain. Rows arrange horizontally. Let’s meet the Row.
The Row Block: Simple Horizontal Arrangements Done Right
The Row block is the simplest layout tool, and that simplicity is its strength. It places blocks in a horizontal line with even spacing: a row of buttons, a logo beside a tagline, social icons in the footer, a price beside a “per month” label. Whenever your thought is “I want these in a line,” the Row block is faster and cleaner than Columns.
The difference from Columns matters. Columns divide space into fixed proportions. Row just lines things up and lets each item take the space it needs. A row of three buttons does not need three equal columns. It needs three buttons in a line with gaps. Use Row for lining up, Columns for dividing space. That one sentence will prevent half of all layout confusion.
Row settings are delightfully few. You control the justification: left, center, right, or space-between. Space-between is my favorite for headers, pushing the logo left and the navigation right. You control the gap between items. And items can wrap to the next line on small screens automatically. That is nearly the whole block. Simple tools used correctly beat complex tools used randomly.
I use Rows constantly in places people overlook: button pairs under a hero heading, a star rating beside a review count, tags at the end of a post, partner logos in a footer. Anywhere items belong in a line, Row is the answer. If you have been building these with Columns, try Row once and feel the difference. Less setup, cleaner markup, easier editing.
Now the most powerful tool in the set, and the one my developer friend was pointing me toward: Grid.
The Grid Layout: Auto-Responsive Magic for Card Sections
The Grid layout, available as an inner layout option on the Group block, is the tool I reach for whenever items should flow and wrap automatically. Team member cards. Service listings. Portfolio pieces. Blog post grids. Any collection of similar items where the count might change. Grid handles all of it with a grace that Columns cannot match.
Here is how it works. Insert a Group block and set its inner layout to Grid. You get two modes. Auto mode asks for a minimum column width, say 280 pixels, and the browser fits as many columns as the space allows. On desktop that might be four across. On a tablet, two. On a phone, one. You set one number and the layout responds to every screen size by itself. Manual mode lets you fix the column count, three columns come hell or high water, which is useful when the design demands exactness.
Auto mode is the magic. I build a team section with eight member cards inside a Grid set to 280-pixel minimum width, and I never think about breakpoints again. Add a ninth member and the grid absorbs it. Remove two and it reflows. The layout maintains itself as content changes. Compare that to Columns, where adding a fourth card to a three-column layout means rebuilding the structure. For any repeating collection, Grid wins.
Each grid item is just blocks inside the grid. I build one card, a Group containing an image, a heading, and a paragraph, style it, then duplicate it for each item and change the content. Consistent cards, minimal effort. Set the gap in the Grid settings to control spacing between all items at once. One setting, uniform rhythm. This is the closest the block editor comes to a design system, and it requires zero code.
Bonus Tip: Combine Grid with patterns for maximum speed. Save your perfected card as an unsynced pattern, then insert it once per grid item. You get a professional card grid in minutes, and each card remains independently editable. The patterns workflow guide covers this technique in full detail.
You now know all four tools. The real mastery is knowing which to grab. Here is my decision system.
The Decision System: Which Block for Which Job
After years of building, my choice comes down to four questions. Memorize these and you will never stare at the inserter in confusion again.
Question one: am I wrapping a section? If yes, Group. Backgrounds, padding, full-width bands, movable sections: always a Group. This is your default container for everything.
Question two: do I want a fixed number of items side by side? If yes, Columns. Text beside image, three fixed features, a two-column testimonial: Columns with a preset, fine-tuned with the width slider.
Question three: am I just lining things up? If yes, Row. Buttons in a line, icons in a footer, logo and tagline: Row with justification and gap.
Question four: is this a collection that should reflow? If yes, Grid. Cards, team members, portfolios, product listings: Group with Grid inner layout in auto mode.
Notice what this system does: it replaces guessing with a checklist. I run through these four questions for every section I build, and the answer is usually obvious by question two. Decision fatigue is the real time-killer in page building, not the clicking. A system eliminates it.
One more principle: combine, do not force. Real sections use multiple tools together. A pricing section is a Group containing a heading and a Columns block with three pricing cards, where each card is a Group containing a Row for the price. Group, Columns, Group, Row. Four tools, one section, each doing its natural job. Forcing one block to do everything is how you end up with the car crash I described at the start.
Theory is done. Let’s build five real sections you can copy today.
Five Layout Recipes You Can Copy Today
These are the exact structures I build weekly. Copy the nesting, adapt the content, and you will have professional sections in minutes.
Recipe one: the hero section. Group, full width, background image or color, generous padding. Inside: Heading, Paragraph, Row containing two Buttons. The Row lines up your primary and secondary buttons without fuss. Total build time once practiced: three minutes.
Recipe two: the three-feature row. Group with a light background for section rhythm. Inside: centered Heading, short Paragraph, then a Columns block with three equal columns. Each column holds an image or icon, a Heading, and a Paragraph. The classic for a reason: visitors scan three items effortlessly.
Recipe three: the card grid. Group with Grid inner layout, auto mode, 280-pixel minimum width. Inside: one card Group per item, each holding an Image, a Heading, and a Paragraph. Duplicate the card for each item. Perfect for teams, services, portfolios. Add or remove items freely; the grid reflows itself.
Recipe four: the alternating content rows. One Group per row, each containing a Columns block at 50/50. Row one: image left, text right. Row two: text left, image right. Alternate down the page. This rhythm keeps long pages visually interesting and is the backbone of most modern landing pages. Pair it with the techniques in the complete block editor guide and the speed guide to keep these image-heavy sections fast.
Recipe five: the pricing table. Group with generous padding. Inside: Heading, Paragraph, then Columns with three columns. Each column is a Group card with a tinted background, holding a plan name Heading, a Row with price and period, a List of features, and a Buttons block. Make the middle card visually distinct with a stronger background color. Pricing tables convert on clarity, and this structure delivers it.
Five recipes, four tools, zero code. Before you go build, let me save you from the classic mistakes.
Mistakes Everyone Makes (And How to Fix Them)
Mistake one: nesting too deep. Groups inside Columns inside Groups inside Columns. Beyond three or four levels, layouts become fragile and the editor slows down. Fix: flatten. Ask of every wrapper whether it earns its existence. If a Group holds a single Paragraph with no styling, delete the Group.
Mistake two: fixed widths that break mobile. Setting pixel widths on columns or images instead of letting them flex. On desktop it looks precise. On phones it overflows or squishes. Fix: use percentages and the built-in presets, and always check the mobile preview. The editor’s responsive defaults are smarter than manual pixel values.
Mistake three: inconsistent gaps. Eyeballing spacing differently in every section produces a page that feels subtly wrong without visitors knowing why. Fix: decide your standard gaps once, 24 pixels between related items, 48 to 64 between sections, and apply them everywhere. Consistency is invisible when present and obvious when absent.
Mistake four: forgetting the mobile check. I mention it in every guide because everyone skips it. Complex layouts deserve a real phone test, not just the editor preview. Columns stack, Grids reflow, Rows wrap: verify each behavior on an actual device before publishing.
Avoid these four and your layouts will be sturdier than 90 percent of what I see in audits. Now the questions I always get.
Frequently Asked Questions
When should I use Grid instead of Columns? Use Grid when items should flow and wrap automatically, like cards, team members, or portfolios, especially when the item count changes. Use Columns when you want a fixed number of side-by-side items with specific proportions, like text beside an image. If you are unsure, Grid’s auto mode is the safer default for collections.
How deep can I nest blocks before problems start? Three to four levels is comfortable. Beyond five, the editor gets sluggish and layouts get fragile. If you are deeper than that, you are probably wrapping things that do not need wrappers. Flatten ruthlessly.
Do these layouts work on all themes? Columns, Group, and Row work in any theme that supports the block editor. The Grid inner layout option needs a modern block theme. If your theme is old enough to predate these features, that is a sign it is time to switch to a current block theme.
Can I save these layouts to reuse them? Yes, and you should. Build any recipe once, select the outer Group, and save it as a pattern. Next time you need a pricing table, insert the pattern instead of rebuilding. This is one of the highest-value habits in WordPress building.
Why does my layout look different on the live site than in the editor? Almost always one of three causes: cached styles showing an old version, theme styles overriding block settings, or a plugin injecting its own CSS. Clear your cache first. If the difference persists, check for conflicting styles in that order. The editor preview is honest. Something between it and the visitor is lying.
Final Thoughts
That car-crash services page from three years ago? I rebuilt it in an afternoon once I understood the four tools. Group for sections, Columns for fixed side-by-side, Row for lining up, Grid for reflowing collections. The rebuild took less time than I had spent fighting the original, and it has survived three redesigns since because the structure was sound.
Layout mastery is not talent. It is a decision system plus a handful of recipes. You now have both. The next time a layout fights you, stop nudging blocks and ask the four questions. The right tool will be obvious.
Build one card grid with auto mode this week. Just one. Feel how it reflows on your phone without you doing anything. Then come back and tell me about it in the comments. Watching that grid adapt on its own never gets old, and I want to hear about your first one.
