How to Place and Span Items in an Elementor Grid Container

Flexbox is great for lining things up in a row or a column. But the moment you want a layout where items span multiple columns, sit in specific rows, or form an asymmetric "bento" arrangement, flexbox starts to fight you. That is exactly where the Grid Container shines.

In this tutorial you will learn how Elementor's grid container works, how to control the number of columns and rows, and most importantly, how to place and span individual items to build layouts that would be painful with flexbox alone.

Grid Basics in Plain Language

A grid divides a container into columns and rows, like a spreadsheet. Every child element sits in one or more cells. You decide:

• How many columns and rows the grid has.
• How large the gaps between them are.
• Where each item goes and how many cells it covers.

The big difference from flexbox is that grid controls both directions at once. You are not just arranging items in a line; you are placing them on a two-dimensional map.

Creating a Grid Container

1. Add a new container and choose the Grid layout instead of Flexbox. When you add a container from the plus icon, Elementor offers preset grid structures you can start from.
2. In the Layout settings, set the number of Columns and Rows.
3. Set the Gaps for columns and rows, for example 24 pixels.
4. Choose how the grid flows when items are added automatically: by row or by column.

Drop a few elements in, and Elementor places them into the cells in order.

Columns and Rows: Fixed or Flexible

The simplest setting is a number, such as three columns. Behind the scenes, that creates three equal fractions of the available width. For more control, switch the unit to Custom and enter a CSS grid template directly, for example:

• 2fr 1fr for a wide main column and a narrow sidebar.
• repeat(4, 1fr) for four equal columns.
• repeat(auto-fill, minmax(240px, 1fr)) for a responsive card grid that adds or removes columns based on available space.

That last pattern is especially useful: the grid automatically shows four columns on a large screen, three or two on smaller screens, and one on phones, without per-device settings.

Placing and Spanning Items

This is where grid becomes truly powerful. Select any child element inside the grid and look in its Advanced or layout settings for the grid item options. You can set:

• Column span: how many columns the item covers.
• Row span: how many rows the item covers.
• Custom placement: exact start and end lines using CSS grid syntax such as 1 / 3 or span 2.

Example: a featured card

Imagine a blog section with five cards in a three-column grid. You want the first card to be large and eye-catching:

1. Set the grid to 3 columns and 2 rows.
2. Select the first card and set its column span to 2 and row span to 2.
3. The remaining four cards fill the leftover cells automatically.

The result is a classic magazine-style layout, built without nesting any extra containers.

Example: a bento layout

Bento grids are popular for feature sections and product pages. Try a four-column grid with three rows, then:

• Card A spans 2 columns and 2 rows.
• Card B spans 2 columns.
• Card C and D each take one cell.
• Card E spans all 4 columns along the bottom.

Mix image cards with text cards and the section instantly looks custom-designed.

Alignment Inside Cells

Grid also lets you align items within their cells. Use the container's justify and align settings to apply alignment to every item, or the item's own settings to override one. Stretch is the default, which makes cards fill their cells completely and keeps rows visually even.

Making Grids Responsive

Every grid setting can be changed per breakpoint. A typical approach:

• Desktop: 4 columns with spanning feature cards.
• Tablet: 2 columns, reduce large spans from 2 rows to 1.
• Mobile: 1 column, remove all spans so items simply stack.

Remember to reset spans on smaller screens. An item spanning 3 columns in a 1-column grid creates extra implicit columns and can cause horizontal scrolling.

Grid Versus Flexbox

Use grid when	Use flexbox when
You need rows and columns at the same time	Items flow in a single row or column
Items must span multiple cells	Content size should decide the layout
You want a precise, magazine-like structure	You are building navigation bars or button groups

Common Mistakes

• Too many rows defined. If you set five rows but only fill three, you may see empty space. Let rows be created automatically when possible.
• Forgetting spans on mobile. Always check and reset spans on smaller breakpoints.
• Fixed heights. Let row heights adapt to content unless you are building an image-only gallery.
• Nesting grids unnecessarily. One well-planned grid often replaces several nested flexbox containers.

Wrapping Up

The grid container turns complex layouts into a simple question: which cells should this item cover? Define your columns, set a comfortable gap, then span and place items to create featured cards, bento sections, and galleries. Combine it with responsive spans and you have a layout system that looks custom on every screen.