Bento Style with CSS Grid - Code Snippets CSS Grid Helper - Elementor Wordpress Tutorial

Let's build some Bento Style with CSS Grid - Code Snippets CSS Grid Helper - Elementor Wordpress Tutorial
CSS Grid Helper = www.codesnippets.cloud/snippet/WebSquadron/CSS-Grid-Aid
Thanks to Mark Harris for the Code Snippet
Elementor Hosting - managed wordpress hosting :
be.elementor.com/visit/?bta=25741&nci=5486
Elementor Pro - The builder that will make you a pro
be.elementor.com/visit/?bta=25741&nci=5383
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquadron.co.uk/
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-start-a-web-design-business/
Book your 1-2-1 Consultation: websquadron.co.uk/socials
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-mastery/
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: groups/3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=25741&nci=5383
😃 Boost your KZbin Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 [e-mail]
👩‍💻 Visit websquadron.co.uk

[@EamonnO-d7k]

Hey Imran, Thank you for the insightful video on CSS grid layouts. 👍👍 Could you or someone from the community kindly consider creating a follow-up video that demonstrates the application of this grid layout within a custom loop where the first five items in a custom loop can be effectively displayed using this grid layout?

[@websquadron]

Interesting request. Let me have a think.

[@zimsuk]

Thanks, it finally made me understand how to work with the grid 👍🏻👏🏻💪🏻

[@ericuk9481]

Hello Imran hope you are doing good. Quick questions if you don t mind, How do you make your grid responsive for mobile ? Without hiding the grid ? Do you have any video on that matter ? Thank you

[@websquadron]

You can add @media to modify the CSS spans, or just ensure that each grid is set to 1005 when it gets to the mobile breakpoint.

[@ericuk9481]

@@websquadron thank you Imran

[@StevanOvich61]

Wow, nice! 👍

[@TheEpetecain]

Hi Imran, insightful video! I have a question: anyone know how to get rid of of "g6"? You can see the dotted box (which it's empty) on all versions (desktop/tab/mobile). I mean, theres's a "blank space" below and I don't know how to remove it.

[@websquadron]

It should disappear. If not then add a container set to 0 height inside.

[@sproksch87]

hey, thank you very much for the video. Can you or someone from the community explain to me what the advantage of the CSS Grid is over the alternative to the Flex Box container? Thank you very much and greetings from Stuttgart (Germany)

[@websquadron]

No disadvantage depending on how you build it - and like with Flex you will need to adjust for the tablet/mobile. Grid can make it easier to compartmentalise items or areas of the page.

[@lucianpascu8445]

Grid is mostly for layouts (complicated ones) and Flex mostly for content or simple layouts. Sometimes you will combine them.

[@shibupandit24]

No more bricks tutorials now days ?

[@websquadron]

Soon, just not yet.

[@QuaverloveStudio]

Sound!

[@QuaverloveStudio]

Hey, Imran. I just ran into a bit of difficulty with the CSS Grid bento layout: It shows perfectly in the editor, but when I preview it live, it doesn't have the styling... just a normal left-to-right and then on to the next row... I've tried it on all the browsers I have installed... same thing. Have you come across this before?