Mosaic Layout System Explained — Section, Container, Grid, and Why I Fought a Navbar for Two Hours

In my last article I covered how Mosaic’s navigation system works — the Navbar component, the hamburger, and why the Menu element isn’t what you think it is. While building that header, I ran into something else entirely: the layout system.

I had the Navbar working. The menu was connected. The button was in place. But the logo was enormous — filling the entire header like a billboard. The navigation was squeezed into a corner. Nothing was proportional.

The structure looked right in the Navigator. The elements were in the correct order. But something underneath wasn’t behaving the way I expected.

After a full session of testing, deleting, rebuilding, and comparing my header against the Monolith demo, I finally understood what was happening. And it had nothing to do with Mosaic specifically — it was CSS Grid, and gaps in how I understood it after years of working through Elementor’s abstractions.

This article covers Mosaic’s main layout elements: Section, Container, Grid, Columns, Rows, and Div. I’ll focus on the ones that tripped me up most while building the header — and I’ll cover the rest in practical tutorials as the site grows.

Section

A Section is the full-width horizontal band that divides your page into thematic areas — hero, features, testimonials, footer. Think of it as a chapter of your page.

Two rules worth remembering. First, Sections always take up the full width of the body — background colors and images live here. Second, you cannot nest a Section inside another Section. Mosaic enforces this deliberately. It keeps your page structure semantic and clean, which matters for both search engines and screen readers.

Every Section automatically includes a Container when you add it. This saves you a step because you almost always need one.

In Elementor terms: Section is the outer full-width wrapper. Background color, background image, padding — all live on the Section.

Container

The Container’s only job is to limit max-width and center your content. That’s it.

Without a Container, your content stretches edge-to-edge on a wide monitor. With a Container set to 1216px max-width, everything stays readable and properly aligned at any screen size.

In Mosaic, Containers are tied to Style Variables. The Monolith theme ships with a Size variable collection — 1 column through 12 column — and you set your Container’s max-width to the 12 column variable (1216px). Change that variable once and every Container on the site updates automatically.

In Elementor I was setting container widths manually on every section for years. This is better.

Grid

Grid is for two-dimensional layouts — you control both rows and columns simultaneously. Card grids, feature sections, pricing tables. Any time you need elements to align both horizontally and vertically, Grid is the right tool.

Here is the thing that confused me most.

In Elementor, when you set a grid to 2fr 8fr 2fr, the child elements automatically fill those columns. In Mosaic — and in raw CSS Grid — fr units only work when the Grid has a defined total width. Without a width, fr units have nothing to divide and the columns collapse to content size.

The fix is straightforward: give your Grid an explicit width. Either 100% to fill its parent, or the 12 column Style Variable (1216px) to match your site’s max-width. Once the Grid has a defined width, 2fr 8fr 2fr works exactly as expected.

The navbar lesson — auto vs fr

This is where the two hours went. It deserves a proper explanation.

For a navbar with logo on the left, navigation in the center, and a button on the right, you have two valid approaches.

Option 1: auto | 1fr | auto

• auto means the column takes exactly as much space as the content inside needs. If your logo is 160px wide, the column is 160px — nothing more.
• 1fr means take all remaining space after the auto columns are satisfied.
• The logo and button shrink to fit their content. The navigation fills everything in between.
• This works without setting an explicit Grid width — because auto is content-based, not proportional.

Option 2: 2fr | 8fr | 2fr

• Divide the total Grid width into 12 equal parts.
• Logo gets 2/12, navigation gets 8/12, button gets 2/12.
• Always proportional, regardless of content size.
• Requires a defined Grid width to work correctly.

Both are valid. The Monolith theme uses auto | 1fr | auto because it adapts to content naturally. The 2fr | 8fr | 2fr approach feels more familiar if you think in 12-column grids — which I do, coming from Elementor.

The combination that breaks everything: 1fr | auto | 1fr. This gives the logo and button each a large flexible fraction, while the navigation gets only what its content needs. The logo expands to fill its entire 1fr column. That’s how I ended up with a logo the size of a billboard. Use auto for logo and button columns — never 1fr.

Columns

Columns arranges child elements horizontally using Flexbox — icon next to text, logo next to tagline, any side-by-side layout. Under the hood it’s display: flex; flex-direction: row.

Use Columns when you need a single horizontal row of elements with flexible spacing and alignment. Simpler than Grid for one-dimensional horizontal layouts.

Rows

Rows arranges child elements vertically using Flexbox — stacked labels, form fields, any top-to-bottom sequence. Under the hood it’s display: flex; flex-direction: column.

Use Rows when you need a controlled vertical stack of elements with a consistent gap.

Div

The Div is the most generic element — a plain block-level container with no presets or opinions. Use it for simple grouping, custom wrappers, visual dividers, or any time you want full manual control without the layout assumptions that Grid, Columns, or Rows bring.

One useful Mosaic feature: you can switch any element between Div, Grid, Columns, Rows, and Container by changing the element class. The element stays in place in the Navigator — only the CSS preset changes. Start with a Div, promote it to a Grid later without rebuilding anything.

The semantic tag system

Every layout element in Mosaic lets you set the HTML tag it outputs. Section defaults to <section>. You can change it to <header>, <main>, <footer>, <article>, or any valid HTML5 element.

In Elementor, everything outputs as a <div> unless you add custom attributes manually. In Mosaic, semantic HTML is a first-class decision you make while building. This matters for SEO and accessibility — <header> and <main> are landmark elements that search engines and screen readers understand as meaningful structure, not just layout boxes.

The honest conclusion

Mosaic’s layout system is not more complex than Elementor’s. It’s more explicit.

Every layout decision you make in Elementor — Flexbox direction, grid columns, container max-width — still happens in Mosaic. The difference is that Mosaic makes you make those decisions consciously instead of hiding them behind presets.

After two hours of fighting a navbar, I understand CSS Grid better than I did after years of clicking in Elementor. That’s not a complaint. That’s the point.

If you’re coming from Elementor and Mosaic feels harder at first, it’s probably not Mosaic. It’s CSS that you’ve been using through an abstraction layer without realizing it. Mosaic removes the layer.

Part 2 — responsive layouts and mobile breakpoints — coming next.

I’m building buildwithmosaic.com as a resource for WordPress developers learning Mosaic Builder. If you’re coming from Elementor or JetEngine, follow along — I’m translating everything through that lens.