Elementor Bento Grid with Three Columns

This Elementor bento grid arranges four feature cards in three columns under a short heading: a phone screenshot on the left, two stacked cards in the middle, and a file preview on the right. Bento Grid Three Column is a free, responsive block shared as a JSON file and built only with native Elementor widgets.

What's Inside the Block

• A centered intro with a small green label ("Order smarter", #007A55) and a large headline ("Everything Your Shop Needs in One Spot") at 3 rem.
• Three equal columns on a light gray background (#F9FAFB), 1 rem apart, with white rounded cards and a soft shadow.
• The left card holds a phone-shaped dark frame, built from a container with a thick border and rounded top, for a mobile screenshot.
• The middle column has two stacked cards, each with a title, a short text, and an image below.
• The right card holds a dark panel with two file-style tabs ("Weekly-Restock-List.csv" and "Invoice") above a screenshot.
• The outer corners of the left and right cards are rounded more (2 rem) than the inner corners (0.5 rem), which gives the grid its shape.

Tip: Use screenshots of your real product for the phone and the file panel, and keep the other two images simple. Crop screenshots so the important part sits at the top, because the phone image is aligned to the top and cropped at the bottom.

Requirements

• A recent version of Elementor with Flexbox Container available.
• No Elementor Pro required.
• The Inter font available on your site (otherwise a fallback font is used).
• Four images of your own: a phone screenshot, a file or table screenshot, and two card images.

Note: All four Image widgets are empty, so Elementor shows its default placeholder until you choose your own images. The images in the preview are gray placeholders. The big headline is a paragraph (P tag) and the small green label is the H2, so if you want the headline to count as your section heading, swap the two tags in each widget's HTML Tag setting. The two tabs on the right card are text only and do not switch anything. The three column widths use custom calc values, so an older version of Elementor may show them differently. Back up your page before importing a template into an existing layout.

Download Elementor Template (JSON)

Widgets Used

Element	Purpose	Pro?
Flexbox Container	Section wrapper, three columns, cards, phone frame, and file panel (18 in total)	No
Heading	Label, headline, card titles, card texts, and file tabs (12 in total)	No
Image	Phone screenshot, two card images, and file screenshot (4 in total)	No

Frequently Asked Questions

How do I import this Elementor JSON template?

First, download the JSON file using the button above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.

Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.

How do I change the text in the cards?

Click a card title or its text and type your own. Each title is a Heading widget with the H3 tag, and each text is a second Heading widget below it. To change colors or sizes, select the widget and open the Style tab.

How do I replace the images?

Select an Image widget, open its Content tab, and choose or upload your own image. The phone image is set to 100% width and 440 px high, aligned to the top. The file screenshot is 320 px high with a small corner radius. The Safe Pay image is 152 px high, and the Fast Supply image keeps its natural height.

How do I change the file names on the tabs?

Click a tab label and type the new name. The tabs are Heading widgets with the span tag and a background, so they look like file tabs but do not switch content. If you want working tabs, use Elementor's Tabs widget instead.

How do I add or remove a card?

The middle column holds two cards, so you can duplicate one of them to add a third card there, or delete one to leave a single card. Because cards stretch to fill the column height, the layout adjusts to the number of cards. The left and right cards are tall because of their image panels.

How do I change the corner shapes?

Select a card container, open its Style tab, and edit the Border Radius. The outer corners of the left and right cards use 2 rem, and the inner corners use 0.5 rem. Tablet and mobile have their own radius values, so edit those views too.

How does the layout change on tablet and mobile?

On tablet and mobile, the three columns stack into one column of full-width cards, and the card text and titles are centered. The large rounded corners move to the top of the first card and the bottom of the last card, and the phone frame and file panel keep their own widths and image heights.

Where should I place this bento grid?

Place it below a hero section to show your main features, or on a product page before pricing. Because its label is an H2, use it after the page's H1 and main content.

Do I need Elementor Pro?

No. The block only uses native Heading and Image widgets inside Flexbox containers.

Why won't the file import?

Make sure the file has a .json extension and hasn't been unzipped or edited. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.

Why do the Flexbox settings look different or missing?

Update Elementor to the latest version. On older versions, the Flexbox Container feature may need to be enabled first in Elementor's feature settings.

Why does the font look different?

The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.

Looking for more bento grid sections? Browse all Elementor bento grid templates, or see every free block in Elementor Templates.