The Elementor Grid container arranges items in rows and columns at the same time, ideal for card grids, galleries, feature blocks and bento layouts. Add a container, choose Grid as the layout, set the number of columns and rows, set column and row gaps, and change the column count for tablet and mobile. Use Flexbox for single rows or stacks, and Grid for two-dimensional layouts.
- Grid controls rows and columns together.
- Perfect for card sets and bento layouts.
- Set different column counts per device.
- Items can span multiple columns or rows.
- Use Flexbox for simple one-direction layouts.
When should you use Grid instead of Flexbox?
| Layout | Best choice |
|---|---|
| Hero with text and image | Flexbox |
| Six service cards in rows of three | Grid |
| Photo gallery | Grid |
| Navigation bar | Flexbox |
| Bento feature layout with uneven sizes | Grid with spans |
How do you build a responsive card grid?
- Add a container and set layout to Grid.
- Columns 3, rows auto; column and row gap 24px.
- Add six child containers as cards.
- Tablet: 2 columns. Mobile: 1 column.
- Style cards with padding, border radius and shadow.
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
How do bento layouts work?
Picture a features section where one big card spans two columns and two rows, with smaller cards around it. In Grid, select the big card and set its column span to 2 and row span to 2. It looks custom and modern without any code. Revisit containers and Flexbox for the basics.
Want to learn Elementor layouts faster with a tutor?
I teach WordPress and Elementor 1-to-1 over Zoom or Google Meet, on your own website, at your pace. Lessons start at $40, every lesson is recorded so you can rewatch it, and you get a short checklist afterwards. Beginners, business owners, students and freelancers are all welcome. See lessons and prices or book a free intro call.
Frequently asked questions
What is the Elementor Grid container?
A container layout that arranges items in rows and columns at once, ideal for card grids.
When should I use Grid instead of Flexbox?
Use Grid for two-dimensional layouts like card sets and galleries; Flexbox for single rows or stacks.
How do I make a grid responsive in Elementor?
Set different column counts for desktop, tablet and mobile.
Can grid items span multiple columns?
Yes, set column or row span on the child container.
Sources
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
More WordPress guides
Guide, 3 min readWordPress and Elementor Tutoring: Your Questions Answered
Guide, 3 min readWordPress Multisite Explained: Who Needs It (and Who Does Not)
Guide, 3 min readWordPress Comments and Spam: Settings That Keep Your Site Clean
Guide, 3 min readHow to Move WordPress to HTTPS (SSL) and Fix Mixed ContentRather have an expert run your WordPress site?
Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.
