How to Build Layouts with Atomic CSS Grid in Elementor 4.2

When the Atomic Editor first launched, one question came up again and again: where is Grid? The atomic system had flexible layout elements, classes, variables, and components, but serious grid layouts still meant falling back to the classic Grid container.

Elementor 4.2 closed that gap with a native atomic Grid element. It follows the same CSS-first philosophy as the rest of the Atomic Editor, works with Classes and Variables, and adds a few tricks the classic grid never had. In this walkthrough you will build a real layout with it, step by step, and learn the settings that make it so useful.

What Is New in the Atomic Grid

• A dedicated Grid element in the Atomic Elements section of the panel.
• Any CSS unit for tracks, including fr, px, percentages, and more, so you can define columns and rows exactly like you would in CSS.
• Gap, auto-flow, and auto-sizing controls for implicit rows and columns.
• Show Grid Outline, which draws the grid lines on the canvas while you edit. It is an editor aid only and does not appear on the live site.
• Grid Child controls on every child: Column Span, Row Span, Align Self, and Order.
• Dense auto-placement, which fills empty cells left behind by spanned items.
• Classes and Variables support, so grid settings become part of your design system.

Before You Start

Update Elementor to version 4.2 or later and make sure the Atomic Editor is active. As always, try new layout features on a staging site first if you are working on an important live project.

Project: A Feature Section with Mixed Card Sizes

We will build a six-card feature section where one card is large, one is wide, and the rest are regular. This kind of layout is popular on SaaS and agency sites, and it is exactly where grid beats flexbox.

Step 1: Add the Grid element

1. Drag the atomic Grid element onto the canvas.
2. Turn on Show Grid Outline so you can see the tracks while you work.

Step 2: Define the tracks

• Set the columns to repeat(3, 1fr) for three equal columns.
• Leave the rows on auto-sizing so they grow with their content. If you prefer uniform rows, set an implicit row size such as minmax(200px, auto).
• Set the gap to 24px, or better, to a size variable such as space-lg if you have Elementor Pro.

Step 3: Add the cards

Add six children. Each can be a simple atomic container with a heading, a short paragraph, and an icon or image. Style one card, save the styling as a class such as card-feature, and apply the class to the other five. Now every card shares one source of truth for padding, radius, background, and shadow.

Step 4: Span the special cards

1. Select the first card and open its Grid Child settings.
2. Set Column Span to 2 and Row Span to 2. It becomes the hero card of the section.
3. Select the fourth card and set Column Span to 2, making it a wide card.

Step 5: Turn on dense placement

Spanning items often leaves holes in the grid, because later items cannot fit into the gaps in order. Switch auto-flow to dense, and the grid backfills those holes with smaller items. This is ideal for galleries and mixed card layouts where strict source order is less important than a tidy result.

A note on accessibility: dense placement changes the visual order, but screen readers and keyboard navigation still follow the order in the HTML. Use it for collections of equal importance, not for step-by-step content.

Step 6: Adjust for tablet and mobile

• Tablet: change columns to repeat(2, 1fr). Keep the hero card at 2 columns but reduce its row span to 1.
• Mobile: change columns to 1fr and set all spans back to 1.

Because the Atomic Editor lets you change every property per device, this takes only a minute.

Useful Grid Child Settings

Setting	What it does	Typical use
Column Span	Number of columns the item covers	Wide cards, banners inside a grid
Row Span	Number of rows the item covers	Tall images, featured cards
Align Self	Vertical alignment inside its cell	Centering a short item in a tall row
Order	Changes the visual position	Moving a card first on mobile

Turning Grids into Reusable Patterns

Because the atomic Grid supports classes, you can save layout patterns:

• grid-cards-3: three columns, standard gap, auto rows.
• grid-gallery: four columns, small gap, dense flow.
• grid-bento: four columns with fixed row sizes for mixed spans.

Apply a class to a new Grid element and the layout is ready in one click. If you use Elementor Pro, wrap a complete grid section in a Component to reuse it across pages.

Atomic Grid and Atomic Loops

Elementor 4.2 also introduced Atomic Loops for Pro users, which render a set of posts or products from a query. Combine them with grid layouts to build blogs, portfolios, and product listings using the same atomic system, with pagination options including Ajax navigation.

Troubleshooting

• Extra empty column appears on mobile. A child still has a column span larger than the number of mobile columns. Reset spans per device.
• Cards have different heights. Make sure Align Items is set to stretch, and avoid fixed heights on cards.
• Grid outline shows but layout looks wrong on the live site. Clear your cache and any CSS optimization plugin, then check again.

Wrapping Up

The atomic Grid brings real CSS Grid power to the Atomic Editor: flexible tracks, precise spans, dense placement, and full design system support. Start with the six-card exercise above, save your favorite layouts as classes, and you will have a library of grid patterns ready for every new project.