Elementor CSS Grid vs Bricks Builder CSS Grid

Elementor have just released their beta version of CSS Grid, Join me as I take it for a spin and compare it to CSS Grid in Bricks Builder.
If you've never used CSS Grid, you're in for a treat as they open up a lot of great design potential, especially for more adventurous layouts and designs.
Does it compare or beat Bricks Builder's version of CSS Grid?
Join me and find out!
Ele Doc: github.com/orgs/elementor/dis...
Bricks CSSGrid Guide: academy.bricksbuilder.io/arti...
Imrans Videos:
1. • CSS Grid - First Look ...
2. • CSS Grid Span Rows and...
Take your WordPress website and skills to the next level!
► The Essential Web Designer's Documents Pack
Looking to take your web design business to the next level? The Essential Web Designers Documents collection has got you covered! With handcrafted, professionally designed documents that have generated tens of thousands in revenue, you'll have everything you need to impress clients, streamline your workflow, and boost your bottom line.
► Buy the Essential Web Designer's Documents Pack Now: links.wptuts.co.uk/ewdd
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ GenerateBlocks: jo.my/xotgcy
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ Blocksy: jo.my/y67ten
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/facebook
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk

[@PicSta]

CSS Grid and Flexbox is more like a brother and a sister. They both work super hand in hand, but each can live on its own. Grid is awesome for structuring / layouting things. Where Flexbox has its advantage with arranging the content in a row or column flow. I highly recommend learning the CSS Basics as this helps massively to build better websites.

[@KOBE42__]

Very well explained. Having spent time learning pure CSS Grid and flexbox, I love how Bricks builder has integrated it into the builder. It was one of the main reasons I switched from Elementor to be honest. Bricks may have a steeper leaning curve but it’s time well spent once you realise how much better it is.

[@WPTuts]

I totally agree. It's worth taking the time to learn the fundamentals as these types of features are released way quicker in Bricks.

[@BestMLMDXN]

@@WPTuts Sir , could you please make a detailed video on creating a responsive website using Bricks CSS GRID. Sir, could you please make a detailed video on Bricks CSS GRID fundamentals so that non developer like me could understand it better ?

[@DidierSajnoWebDesign]

Nice one Paul! You’re are becoming the voice for so many people wanting useful changes in Elementor (AI wtf!) Thank you

[@WPTuts]

Let's hope it helps make a difference in the long run... fingers crossed!

[@thijs7504]

Great explication! Thnx for the comparison. One small thing The light reflects on the painting in the back and mirrors the microphone and background behind the camera.

[@WPTuts]

I've noticed that. I'm thinking of changing the background up a bit soon and that will let me move the lighting around without worrying about redflections. :)

[@emailjough]

I really hope they make it possible to do nested grids. That's really where css grid opens up possibilities.

[@AndreSjoberg]

I’ve said it before and I’ll say it again, Elementor, having a huge ecosystem in place based on the old ways of doing things, are taking their time to make sure things will work properly, because they KNOW that if they release and things don’t work for a loud minority it will be HELL on KZbin. Bricks on the other hand came out basing their stuff on lessons learned from amongst other things Elementor, and based on newer ways of doing things and with much less «baggage» are able to appear much quicker in implementing new features, and it will seem that way for a while, and then they will have the same problems Elementor are facing (larger user base, more severe consequences if an update breaks things, bigger and more complex codebase etc etc). And when Elementor is finally done with their changeover for their codebase, having flexbox and css grid as a new foundation for their solution they will be going full steam ahead adding new stuff, AND they will have the advantage of their already huge ecosystem of plugins and addons from third parties. And *that’s* when they can start working on improving their interface, because doing that before flexbox and cssgrid is in place means double the work (if not more). But their main hurdle up until now has been rewriting their codebase to use flexbox and cssgrid, while at the same time try to release some kind of updates, while knowing that doing that is basically working on a dying framework to be replaced by flex and grid, which have stopped them from releasing anything major. It’s kind of like Adobe Premiere vs Davinci Resolve - Premiere is coding and releasing features for a piece of software with so much legacy code and old crap it’s a miracle it still works, while Davinci Resolve has a mean and lean framework that enables them to release update after update of amazing features and functions - but *if* adobe is working on a «from the bottom up» completely new version in parallell to be released at some point a lot of converts to davinci might actually switch back. It will be interesting to see what the landscape is like come summer 2024 for bricks vs elementor, by then it’ll be quite clear if elementor managed their codebase switchover or not - exciting times :)

[@Skratchable]

what is Elementor's operating budget vs Bricks?

[@WPTuts]

I partly agree. The eco-system is the achilles heel and always will be. They have allowed that to prop them up and fill so many gaps that they have left so many users reliant on additional plugins that making major changes is plagued with issues and painfully slow development cycles. Just look at the Flexbox switchover. This has been at least a year and it’s still not released which means there are so many experimental features that can’t become stable release features as they are 100% reliant upon the container. Sure, Bricks is more agile due to many factors. One of which is less 3rd party tools. But, while that is changing, they are more in line with frameworks that are not filling feature holes as the core tool provides those feature’s regularly missing in Elementor. That’s not to say Bricks is perfect or won’t suffer it’s own setbacks and issues in the future. I’m sure it will. But, I don’t see them attempting to be the top builder for WordPress. And then there’s Gutenturd… but that’s a different conversation to have. 😉

[@AndreSjoberg]

@@WPTuts Yeah, it’s definitely a hole of their own making, but at the same time, without the ecosystem/plugin-friendly approach they might not have been so popular - and the flexbox/css grid switch over is much bigger than just a new feature, it’s a fundamental change in their whole platform, basically taking an old house built on wooden beams and posts where every beam is propped up against another and together form a rigid building, and switching it all out with a more modular and flexible backbone for the house, *while* people are still living in the house and trying to not make it noticable for the tennants ;) Bricks on the other hand had the advantage of starting out later with both the advantage of looking at what elementor did right, and wrong, and what their customers where saying, but also using flex and grid as their backbone, while elementor are now converting their whole system which is major - which is why i still believe that the elementor approac is the right one, doing it slow and making sure it works, rather that rush into it and break something and have the internet complaining for weeks and months - elementor could have gone the oxygen/breakdance route, just releasing a new builder based on a «new» framework, probably would have been faster, but that didn’t work so well for the oxygen/breakdance crew it seems with loads of complaints. So my guess is that once they are happy everything is working to their satisfaction, and they pull the plug on flex and grid they will quickly be able to pick up the pace on both interface improval as well as new features, and I think their approach with the release of the flex container as an building block we can convert pur existing layouts to have been pretty smooth with very few hickups along the way, thanks to the slow rollout, which also has made it possible for me to try the new flex element in live solutions (but on test pages), building new layouts ready to deploy (when they go out of beta and release) for all my customers with only minor adjustments. It’s also a lot less work than having to rebuild customer websites with a new builder/theme, and to be honest: all the old sites have been chugging along happily while all of this is happening :) As for the big G … personally, I don’t hate the idea, but the execution and the interface is so far off from being an effective, cohesive solution that I’m almost more worried that it will kill wordpress more than the snail pace of elementors flex and grid implementation.

[@AndreSjoberg]

@@Skratchable Looking at numbers like that is probably not going to shed any light on the situation, elementors challenge is not one that you solve by throwing more code monkeys/more money and resources at it - People tend to forget that even in large organisations there is usually a surprisingly small core team handling the main structural items, to ensure control and to not introduce too many factors that can complicate and cause bugs that takes ages to figure out, which is probably also one of the reasons why the transfer is taking such a long time - that and the fact that a portion of their company having to make and release updates and features to what is in reality a «dead» framework (the old one) while in parallell working on converting all the old bits into the new flex/css-grid framework AND working on new features and functions as well, a problem that Bricks don’t have. And that’s probably also the reason why so many of the «new» features for the existing Elementor-framework lately has been so underwhelming, since developing new and fancy features for an old, dead framework is not a good use of resources - so the balancing act of staying relevant and in parallell building the new framework is probably one of the major reasons why they are in this «feature slump» right now

[@gordonbrownlee4436]

Excellent as usual, Paul. C'mon Elementor sort it out!!!

[@WPTuts]

Agreed, sort it out and give us the tools we need to get the job done without sacrificing potential issues further down the line if something is changed. :)

[@yiandroortizpellicer5248]

This information is great, I would like you to make a video tutorial where you teach how to make a responsive page with elementor, I have never seen a video of you with that information. Greetings and a strong hug.

[@blackeye.studio]

I still do not know if I have to ditch Elementor for Bricks or for Gutenberg, I still do not understand why they add more and more Alpha and Beta features and still we do not see basic features beeing stable like custom breakpoints. Of course I like containers and csss grid but older features is like abandoned.

[@bobruis4073]

Good good, its new for Elementor and it will get better

[@hairy7653]

it would be good to see some examples of ccs grid usage . idky none of the tuts dont show that.

[@WPTuts]

Good idea.. I'll have to see if I can come up with some real world ideas on how to present one.

[@emailjough]

@@WPTuts One real world use case that may help other people is the case of 2 or more images in a grid that partially overlap each other. They dont each need to be in a separate container. Just place 2 or more images inside a single container and use grid to get them to partially overlap each other, the largest one in back and smaller one(s) layered on top. This is difficult/impractical to do with any other method (flexbox, negative margins, etc) but grid makes it easy and totally mobile responsive. Then add some scroll movement to the images for extra pizzaz. Would be interesting to compare creating the same layout in Elementor and Bricks.

[@einatblackrose]

I think that if you just want to see what you can do with grid, you can look at what web designers do regardless of Wordpress, cuz there are a lot of use cases where it can be useful. The Elementor version seems kind of useless to me at this stage as they have very limited features.

[@paulg2337]

If Elementor does not wake up, they will surely go the way of the Blackberry phone.

[@BestMLMDXN]

Sir, Still Elementor struggling to make Flexbox Container is in Beta version. Recently after a long time they have come up with Mega Menu. Two days ago they have come up with CSS GRID function which is in Alpha version. There are lot of difference in approach of CSS GRID function in Bricks and Elementor. Bricks CSS GRID has wide approach whereas Elementor CSS GRID has limited approach. Atleast Elementor should has finally released Flexbox model. I completely shifted from Elementor to Bricks 06 months ago. God knows what has happened to Elementor.. Vivek Kumar

[@Simon-sly]

I agree. Elementor with flexbox is now a confusing mess to non techie users and nowhere near the sophistication of Bricks for experienced devs. They've got themselves stuck in between.

[@websquadron]

Great video

[@PaulShadwell]

Can Bricks Builder be used without a dedicated theme, like Elementor can?

[@WPTuts]

Bricks is a theme, so you don’t need to use external themes.

[@PaulShadwell]

@@WPTuts Thanks, trouble is I am using BuddyBoss, which has its own theme.

[@robertwattner]

I saw a response from elementor that looks like they are planning on adding the grid column and row settings soon 🤞

[@WPTuts]

Fingers crossed buddy. My real hope is that they get the Container element out of Beta so as to allow so many of these other features that are reliant on it to also move into a full and final release instead of remaining in the experiments section for ever and a day.

[@robertwattner]

​@@WPTutsyeah it would be great to actually use all these things(safely)

[@morizanova]

In any kind of tech consumer related stuffs, just ignore what promise or marketing buzz which categorized as "will be". Just use already proven tools -method etc except you have spare time and money for having fun or doing experimental project

[@kengerson2163]

Elementor has Flexbox as a Release Candidate, so we may get it soon

[@WPTuts]

Let’s hope so. That’s holding so many other features back it’s getting silly.

[@SuperIce6374]

I’ve been using it on production sites since it was alpha- sue me. I haven’t regretted it for a moment. I hate pre-container elementor with a passion and I had to be rid of it. Flexbox is infinitely better.

[@BGdev305]

Elementor is one HUGE beta.. but atleast they have animated lotties 🤣

[@WPTuts]

And number scrubbers! 😉

[@einatblackrose]

This is so true... It's (almost) funny how they keep releasing new pieces of new features, and none of them is actually done and ready to use. It seems like they're just trying to keep up with what's on the market, just to say "we have it too".

[@bazwillrun]

Wont be long and you can do the old Dreamweaver method..draw your boxes, containers where you wanted them on the page and Dreamweaver did the rest...for people new to the game we are actually going backwards...no point in learning to code html, css etc, any code you do need AI will churn out for you

[@Digital_Tom]

People keep saying - CSS Grid opens up lots of possibilities and more complex layouts - any examples?? The only thing I can see CSS Grid being useful for is some sort of image grid!! If anybody can post any links to show the 'power' of CSS Grid - it'll be great to see because I've never seen this 'power' in action!!!🤔

[@KariposTheOne]

Just try to build 2-dimensional layouts with Flexbox and you are going to understand it

[@Digital_Tom]

@@KariposTheOne I understand what CSS Grid is. I have built many 2D layouts with Flexbox over the years and it really isn't that difficult! So...Do you have any links or examples of 'complex' layouts???

[@KariposTheOne]

@@Digital_Tom Kevin Powell has a lot of great videos, where he also compares flexbox and css grid

[@John.Rearden]

It’s a crying shame that Elementor and Bricks still can’t match Webflow for grid controls. Webflow crushes it with its Grid interface.

[@WPTuts]

Webflow's version does look good. It is odd that tools like Elementor don't look at it's implementation for inspiration.

[@John.Rearden]

@@WPTuts It baffles me that Elementor is late to CSS Grid, and it still does a poor job of it. I can understand if Bricks can’t match Webflow as it is an early stage startup but Elementor has the monetary resources to put some organisational muscle behind matching Webflow’s CSS Grid interface and still it shied away from doing that. Was good of you to compare the two. Cheers

[@bradleyneedham3972]

It does seem as if elementor does absolutely zero competitive research on webflow. They absolutely should look to them for inspiration.

[@dameerdj5403]

Funny! After 6 months Elementor css grid progress equals zero. Not only that Bricks got better in each and every aspect, it’s like several light years ahead.

[@reristavi]

Why using Paid Themes and plugins when we can write from the scratch better CSS using own imaginations,

[@WPTuts]

Maybe because a large portion of WordPress users don’t know or have no inclination to do it manually.

[@reristavi]

@@WPTuts Agree. The video is very nice.

[@KariposTheOne]

Probably the laziest way to implement CSS Grid 😂

[@tavo.obregon]

Elementor is dead, thats the truth.

[@user-fe5rv4kx4v]

Good video, but a lot of empty words. Try to be more succinct. Now, if you remove 50% of the words from the video, we won't lose anything.