Every layout element in Mosaic is technically a div, but each one comes with its own preset and CSS property for a specific job. Once you know which one to reach for, you can structure a page in WordPress with intent instead of guessing, from the big thematic parts down to the smallest wrapper.
Sections and containers
Sections are the chapters of your page, they define high-level parts like your hero or your features. Start a new section every time you begin a fresh thematic part of the page. You can’t put a section inside another section, this keeps the markup semantic and helps search engines and screen readers understand your layout.
Every section in Mosaic comes with a container automatically, so you don’t need to add it yourself. The container has a max width and stays centered, keeping content readable on big screens while it handles the horizontal width for you.
Mosaic’s themes use variables for the max width so it stays consistent across the site. If one container needs a different look, add a custom class instead, that keeps the change scoped to that element. You can stack as many containers in a section as you need, the section’s gap setting controls the spacing between them.
Rows, columns, and grids
Rows and columns are flex-based, built for vertical and horizontal spacing and alignment. A row stacks elements vertically, and the row gap property adjusts the spacing between them instantly. The theme’s subclasses expose that same gap control right from the toolbar.
Columns handle horizontal flow, useful for things like an icon next to a line of text. Like rows, column spacing adjusts straight from the toolbar. Reach for rows and columns when you want a clean, single-dimensional layout that adapts on its own.
When you need both rows and columns to stay aligned at once, for example repeating cards or a gallery, use a Grid instead. Switch between 2, 3, or 4 columns with the theme’s subclasses, or set up a custom grid if the defaults don’t fit.
Add a div
The div is the most flexible building block, it’s there for simple grouping, custom wrappers, or anything that doesn’t fit the other five. For example, you can drop in a div and use it as a visual divider just by setting its background and height.
Every one of these six elements shares the same base, a div, so you can switch a Section, Container, Row, Column, Grid, or Div into another just by picking a different element class, without rebuilding anything.
Result
The page now uses the right element for each job: sections for thematic structure, containers for width, rows and columns for simple alignment, a grid for anything repeating, and divs for everything else. That mix keeps layouts consistent and easy to adjust later, since changing one class updates the whole element instead of rebuilding it.