That helped me out way better than 90% of the way too complicated explained videos!

Thank you for your content. You are very clear with your explanations and you are helping me understand some really useful Bricks tools Imran, I really appreciate it.

Very clear explanation, thank you.

I think now I understand the basics. Thank you!

Loved it. Thanks for getting it out so quick.

😂 Thanks ! You showed me the power of this. This is crazy !

Thanks for this timely tutorial! Just the next day after the release, awesome.

🤯 once again an amazing demo Imran. I think for me a use case would help, also how this would work responsively, for mobile especially.

Thank you. This has helped me start to wrap my head around grids. I appreciate it

I think you did it pretty well. Thank you.

Great tutorial Imran.. I didn't need this until now

Very good explanations. Keep up the good work, Imran.

Very nice tutorial! Thank you!

Nice explanation, Imran! 👍🏻

I believe the columns and rows count from the first line to the last line on the outside of the grid. Example Row: What looks like 2 rows from top to bottom is actually 3. You have the top of row one starting from the border. It counts rows 2 starting from the top of row 2, and since it counts the amount of rows starting from the top. It will count "Row 3" (which may not even be there as a visible row) starting on the bottom of row 2. Because rows start at the top down. It does the same thing for columns going left to right. Hopefully this clears things up!

Imran, it was a wonderful tutorial. Thank you very much for putting this up. As you said, everyone is learning here. My understanding of the column count (when you say Grid Column 1, 2, 3, and so on) is based on the initial declaration you are making. In this example, you say "100px repeat(2, 200px) 300px." This means that you are defining 4 cells for the grid, which makes 5 columns in total. Now, the column spans are based on that, not on the alterations to the cells later. Your explanation is correct in a way, because the first declaration of the columns will always be high in value. The modified grid is based on it, and it would always have lesser value, since it's cells are going to be spaned across right? Again, your explaination is an easy way to remember how it's done, 😊👍

Grid always confused me since I started html and css3. I mostly try everything do it with flex 💪.

Many thanks Imran, do you have, or maybe considering a quick tutorial on when and where to use a container versus a block versus a div?

You should use the fr unit with css grid it’s very powerful 😊

I'm like wondering. If this is fully implemented along with another planned feature - native sorting & filtering, then a tool like WP Grid Builder becomes completely obsolete for Bricks users? WP Grid Builder is a great tool, but it's $249 a year vs Bricks $249 lifetime... If only Bricks introduces what Croco did which is query loop at the widget level like tabs then gush.... it's gonna be hell of a tool

thanks. How do you make this responsive? ALSO do you set the grid then can you add query loop?

nice - however what happens if I followed this and then start adding images, does it not start breaking up due to image sizes ??

glad they introduced grid into bricks but kinda disappointed on the implementation... they could have took a lot of complexity out of it by designing a webflow or even oxygenesque UI... hopefully this is the first basic iteration of it with lots of improvements to come... i use acss with bricks anyway which makes grid such a breeze to setup lol.... but thanks for this it is very helpful for beginners for sure!

can you give the blocks a name ? if you can , another way in grid is way more easy . display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto 35px auto auto auto auto auto auto 80px; grid-template-areas: "banner1 banner1 banner1 banner1" "navigatie1 navigatie1 navigatie1 navigatie1" "main1a main2a main3a main3a" "main4a main4a main5a main6a" "main4a main4a main7a main8a" "main9a main9a main10a main11a" "main12a main13a main14a main14a" "main15a main16a main14a main14a" "footer1 footer1 footer1 footer1"; you see for example main4a taking a box of 4 places , only with the name . the 4 footer1 taking the whole line for the footer for example . im not sure if bricks have the grid template areas setting ? but let say your first block in the container is block 1 . #block1 { grid-area: banner1; margin-top: 0px; margin-right: 0px; ( and more css when you like , but you dont need it for the grid see below block 8 with only the block that gives an area name ) } the name of the block is where you put your css on , and give it the grid area name like i did . #block8 { grid-area: footer1; }

I really considered disliking the video and follow your wish at the end of the video 🤣

Pretty bad tutorial.