THIS video finally got me to understand CSS Grid!!! And I finally could get my hero section just the way I wanted. thank you so much for this. Major breakthrough!
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.
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, 😊👍
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!
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
@@websquadron It all made sense with the edits! The way you explained how the columns work made total sense! It took me a few minutes to really understand it.
@@websquadron fr is actually quite simple. 1fr is 1 fraction of the available width. So if you have - "repeat( 4, 1fr)" each column is 1/4th of the width - "1fr 2fr 3fr" - Total is 5 (1+2+3) so, col-1 1/5, col-2 2/5, col-3 3/5
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; }
That helped me out way better than 90% of the way too complicated explained videos!
THIS video finally got me to understand CSS Grid!!!
And I finally could get my hero section just the way I wanted. thank you so much for this. Major breakthrough!
Glad it helped!
One of the best explanation of CSS grid! Nice work Imran.
Thanks a lot!
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.
Great to hear!
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?
Maybe this.....ua-cam.com/video/rRyKR_uKwAQ/v-deo.html
Thanks for this timely tutorial! Just the next day after the release, awesome.
Loved it. Thanks for getting it out so quick.
Thank you. This has helped me start to wrap my head around grids. I appreciate it
No probs
🤯 once again an amazing demo Imran. I think for me a use case would help, also how this would work responsively, for mobile especially.
Yup I need to play more with this, especially with the % and Mobile side.
I think now I understand the basics. Thank you!
Great tutorial Imran.. I didn't need this until now
Very clear explanation, thank you.
Very good explanations. Keep up the good work, Imran.
Many thanks
😂
Thanks ! You showed me the power of this. This is crazy !
thanks. How do you make this responsive? ALSO do you set the grid then can you add query loop?
You would modify when on Mobile mode and think about widths and positioning.
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, 😊👍
Yup you’re right
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!
I think you did it pretty well. Thank you.
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
Bricks will not be lifetime for long
Totally agree
Get it now
Nice explanation, Imran! 👍🏻
Very nice tutorial! Thank you!
Made my head scratch a few times and was massively edited :)
@@websquadron It all made sense with the edits! The way you explained how the columns work made total sense! It took me a few minutes to really understand it.
nice - however what happens if I followed this and then start adding images, does it not start breaking up due to image sizes ??
Depends on how you add the images. If they are set as cover with set sizes then it is fine
Or just add a gallery instead.
@@websquadron thanks
Grid always confused me since I started html and css3. I mostly try everything do it with flex 💪.
You should use the fr unit with css grid it’s very powerful 😊
Yup, still getting my head around that.
@@websquadron fr is actually quite simple. 1fr is 1 fraction of the available width.
So if you have
- "repeat( 4, 1fr)" each column is 1/4th of the width
- "1fr 2fr 3fr" - Total is 5 (1+2+3) so, col-1 1/5, col-2 2/5, col-3 3/5
@@wpeasy Hold on.... starts searching for my 1996 Graphical Calculator... :)
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!
Agreed
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 🤣
Ha - don’t say that!!
Pretty bad tutorial.
Okay.