I discovered your channel a few weeks ago, when I switched from Elementor to Bricks. I would have liked to find this content much sooner... I think it is important that this reaches more people and they stop wasting their time.
If I worked on a website you made I'd be calling you to drop a thank you for your CSS organization for the time you saved me from inspecting and hunting down elements in different areas in the css.
Another outstanding tutorial Kevin with an excellent solution. Can't thank you enough for all these tutorials. Can't say I get the logical properties bit so will have to go away and explore :D
It's just a replacement for fixed directional properties. It's a more modern approach to writing CSS that provides support for axis changes (e.g. RTL support, etc.).
That was fantastic! And what's even more cool for myself, is the fact that I was thinking in the same direction as you! 😅 The tokenization is always is so satisfying for some odd reason, lol. I just love the cleanness it brings. I didn't know you can swap the values into negatives with * -1 though, that was something I picked up today. And also the grid-auto-rows was new to me. Thanks for another high quality tut!! 👊🏼
Yes, the -1 is tremendous. A guy just commented a couple days ago saying he's been building sites since 1999 and "this tokens stuff is stupid." Cracked me up. How can something so insanely useful continue to escape certain people? Crazy world we live in.
@@Gearycoha! I’ve met similar developers, and they typically tend to be older folks with an “I’ve seen it all” closed-off mindset… (Not trying to be disrespectful towards anyone’s age - far from it! Just stats…)
love it love it love it.... why, cause my spidy sences were a tingling about variables... which means... I am a tiny bit less chumpie. Great Stuff! Thank you!
This is crazy, thanks a lot for this tutorial! I used it to fix my elementor acordion widget not wanting to display in two columns and it worked perfectly! Not to mention i didnt have to touch the tablet and mobile versions since it worked automagically! Will also use this on my personal Bricks website since i prefer using grid whenever i can instead of flexbox.
good, very good. i can say this is one of the most used patterns in ui i use for general layouting, makein flexable grids, even tables. next challange now is how to get rid off lines of the last children item if they are empty.
nice solution and I don't think there is a better one..but since I'm also a perfectionist it's a good idea to add the thickness of your line on left and top as well so it can actually be in the middle even if the line is thicker
Thank you Kevin, well done. Please consider add links for the codepen and the blog post as well in the YT description box. FYI, I added a comment here with ur codepen link, pretty sure YT filtered it as spam😣
Thanks, Kevin. Paying with a like and a comment. I have a question, but want to try and sort it out myself. If I get stuck I'll hit you up in the inner circle.
Thanks for your demo. I have used this technic in the past for a website. The only problem I met is when you have absolute elements inside a card (a selectbox menu for example), it will be hidden due to the overflow
good job as always! a quick thought tho: what happens if you set a stupid number for the thickness? sure, the offset will keep moving the line at gap/2 but does a 20px line stays centered? when you changed it to 5px, it seems that those lines are still in place on the outer side, but enlarged towards the inside of the card. di suspect we have to change the position with the translate trick to keep them centered right on the border. i didn't check this yet, so maybe i'm talking shit.
That’s exactly how I would have done it. Jokes, I had no idea 🤣 @kevin Will you have a logical properties video in pb101? Why they are best practises and how to use them? Because to my eyes that makes the code super hard to read 😂 Keep up the fantastic work you are changing peoples lives!
Thanks for the tutorial :-) But how can I best implement this with Bricks and ACSS? Somehow it doesn't work for me. 😞 As soon as I have written the comment, it works. :-D But one question, how can I round the corners of the lines at the end? Unfortunately it doesn't work that way: .grid__item::before, .grid__item::after { content: ''; position: absolute; background-color: var(--line-color); z-index: 1; border-radius: 5px; }
@@Gearycothank you, I'll check it out! But what if it's e.g. a 3-col grid and there are five elements? Wouldn't the container border span the empty cell as well then? 🤔
If you want the entire grid to have a border, then that's what the above will do. Maybe I'm not sure what you're wanting. A visual would help.@@nikostrobel
Works great as far as it goes. But I was following along with a grid structure using cards of different widths on each row, and the method falls over when the vertical grid lines don't line up.
Thanks for the great and elegant solution. But this elegant solution still lacks automatic symmetry of the elements. For example, we have 3 columns, and 4 elements, then it would be good for the quadruple element to be in the middle, and if there are five elements, then it would be good for them to be displayed on different sides. Tell me how this can be done dynamically and maintainably with a grid. Thank you
@@turvodnikAs mentioned, it is just not possible to use grid for your use case. A grid is like a checkerboard; you just can't have a row of a grid with columns not vertically aligned with another row.
Yep because that’s not a tic tac toe grid. The objective of the technique is to create a tic tac toe grid. If you have a different objective, you need to use a different technique.
I discovered your channel a few weeks ago, when I switched from Elementor to Bricks. I would have liked to find this content much sooner... I think it is important that this reaches more people and they stop wasting their time.
Yes please do a css only series
If I worked on a website you made I'd be calling you to drop a thank you for your CSS organization for the time you saved me from inspecting and hunting down elements in different areas in the css.
Precisely! I thank myself often when I go back to edit an old site, too :) It's not just for others!
CSS is powerful but you man are the best explaining it. Thanks for sharing your knowledge.
oh man, that was absolute beauty. the true genius is in the simplest solution. you could use this to illustrate the frase "code is poetry"
One of the best tutorials ever. Thanks for this method. Saves a lot of time
You the man. I just watched the Intro and the Outro and it was great. I will come to watch only that every time you upload a video.
23:20 Okay that responsiveness is where the magic happens for me. Amazing!
Another outstanding tutorial Kevin with an excellent solution. Can't thank you enough for all these tutorials. Can't say I get the logical properties bit so will have to go away and explore :D
It's just a replacement for fixed directional properties. It's a more modern approach to writing CSS that provides support for axis changes (e.g. RTL support, etc.).
This video just helped me immensely with a build I'm working on. Thank you so much!
Yes, this is peak CSS writing. Like magic
That was fantastic! And what's even more cool for myself, is the fact that I was thinking in the same direction as you! 😅 The tokenization is always is so satisfying for some odd reason, lol. I just love the cleanness it brings. I didn't know you can swap the values into negatives with * -1 though, that was something I picked up today. And also the grid-auto-rows was new to me. Thanks for another high quality tut!! 👊🏼
Yes, the -1 is tremendous. A guy just commented a couple days ago saying he's been building sites since 1999 and "this tokens stuff is stupid."
Cracked me up. How can something so insanely useful continue to escape certain people? Crazy world we live in.
@@Gearycoha! I’ve met similar developers, and they typically tend to be older folks with an “I’ve seen it all” closed-off mindset… (Not trying to be disrespectful towards anyone’s age - far from it! Just stats…)
@@GearycoHe’s probably jealous. Lol
The 100%vw and vh and the overflow:hidden is what I couldn’t get to. So smart 👌
Great explanation for a tricky problem.
I finally got a chance to implement this. Great results and appreciate the tip on grid-auto-rows for balanced lines.
Wow! 😮 So neat, so clean. Damn I have so much more to learn but I am glad I found you to help me through my ascension. Thank you Kevin.
Another platinum tutorial!
I’m going to try this! Would you add this to Automatic CSS?
Considering it
I am late to the party, but these videos are amazing. Time to binge watch everything :D
love it love it love it.... why, cause my spidy sences were a tingling about variables... which means... I am a tiny bit less chumpie. Great Stuff! Thank you!
This was great. Worked just like I wanted.
Great stuff as usual Kevin! Heard about Logical properties for the first time, need to dig into it!
I feel like I'm being blasted with a fire hose of web design content every week, I don't know when you sleep. Thanks for another excellent video!
👨🚒
I love this. Thank you.
Incredible training. I haven't used this sort of design but am thinking I'll implement it at the next opportunity.
Another incredible tutorial - thanks Kevin
This is crazy, thanks a lot for this tutorial! I used it to fix my elementor acordion widget not wanting to display in two columns and it worked perfectly! Not to mention i didnt have to touch the tablet and mobile versions since it worked automagically!
Will also use this on my personal Bricks website since i prefer using grid whenever i can instead of flexbox.
Generally the rule of thumb is:
Grid - laying out content
Flex - positioning elements
Just found you. Great stuff. And yes I learned quite a bit. Thank you!
This was a great tutorial, can't say enough, thanks....
I love this solution! Thanks for this great tutorial!
You are so welcome!
Love it! Exceptional content, no doubt. Again!! Cant thank you enough.👍
Wow, exactly what I was looking for ! :)
This is awesome. The only drawback is when you need overflow not be hidden :)
good, very good. i can say this is one of the most used patterns in ui i use for general layouting, makein flexable grids, even tables.
next challange now is how to get rid off lines of the last children item if they are empty.
I prefer to keep them. Looks weird when they’re gone
This stuff is amazing
Oh man how ellegant this solution is! It gave me such a aha moment to watch your solution even when you are tripping over your tongue! 🤣
Thanks for this, very helpful
Amazing job. Wanna see same thing but with a grid exmaple there will be some columns and rows with "span 2" settings.
nice solution and I don't think there is a better one..but since I'm also a perfectionist it's a good idea to add the thickness of your line on left and top as well so it can actually be in the middle even if the line is thicker
Thank you Kevin, well done.
Please consider add links for the codepen and the blog post as well in the YT description box.
FYI, I added a comment here with ur codepen link, pretty sure YT filtered it as spam😣
Brilliant, thank you!
Thanks, Kevin. Paying with a like and a comment. I have a question, but want to try and sort it out myself. If I get stuck I'll hit you up in the inner circle.
Yes sir!
Top content, thank you so much Kevin 😃
Thanks for your demo. I have used this technic in the past for a website. The only problem I met is when you have absolute elements inside a card (a selectbox menu for example), it will be hidden due to the overflow
🤔
Kevin awesome as always. What if we want the line dividers to be dotted lines?
I think you can use border on the pseudos and get it done. Haven’t tried it though.
you are real GOAT!
good job as always!
a quick thought tho: what happens if you set a stupid number for the thickness? sure, the offset will keep moving the line at gap/2 but does a 20px line stays centered? when you changed it to 5px, it seems that those lines are still in place on the outer side, but enlarged towards the inside of the card. di suspect we have to change the position with the translate trick to keep them centered right on the border. i didn't check this yet, so maybe i'm talking shit.
I think it’s an unlikely scenario because it’ll be super ugly anyway
i agree, at that point all of this won’t make much sense and other techniques are maybe better.
Great tutorial! 🙏🏻🙌🏻 But is that your video/audio editing program on the right side in the background? 🤔🤦🏻
Yep.
That’s exactly how I would have done it. Jokes, I had no idea 🤣
@kevin Will you have a logical properties video in pb101? Why they are best practises and how to use them? Because to my eyes that makes the code super hard to read 😂
Keep up the fantastic work you are changing peoples lives!
i rarely do, but i have to take the hat off today, you Kevin, are getting out of control 😁😁😁😁
🙏
I agree, it's premium content
Fantastic and if you ever wanted to remove borders in between headers you can use
/* row lines */
.grid-container > .grid-item::after {
width: calc(100% + var(--line-offset) * 2);
height: var(--line-thickness);
top: calc(var(--line-offset) * -1);
left: calc(var(--line-offset) * -1);
}
/* columns lines */
.grid-container > .grid-item::before {
width: var(--line-thickness);
height: calc(100% + var(--line-offset) * 2);
bottom: calc(var(--line-offset) * -1);
left: calc(var(--line-offset) * -1);
}
I love it ❤
our guy
Thanks for the tutorial :-)
But how can I best implement this with Bricks and ACSS? Somehow it doesn't work for me. 😞
As soon as I have written the comment, it works. :-D
But one question, how can I round the corners of the lines at the end?
Unfortunately it doesn't work that way:
.grid__item::before,
.grid__item::after {
content: '';
position: absolute;
background-color: var(--line-color);
z-index: 1;
border-radius: 5px;
}
Perfect. Now all we need is a solution for grids where the cards are supposed to have outer lines too (my typical use case...) 😅
Add to grid container: border: var(--line-thickness) solid var(--line-color);
@@Gearycothank you, I'll check it out! But what if it's e.g. a 3-col grid and there are five elements? Wouldn't the container border span the empty cell as well then? 🤔
If you want the entire grid to have a border, then that's what the above will do. Maybe I'm not sure what you're wanting. A visual would help.@@nikostrobel
Nice 👌
Works great as far as it goes. But I was following along with a grid structure using cards of different widths on each row, and the method falls over when the vertical grid lines don't line up.
Why are you using different width cards?
If the line color is gradient, How can I cerate it?
Same way! Linear-gradient function for like background
Kevin IQ 500 confirmed
No, I think I’m super average. Just abnormally persistent.
Thanks for the great and elegant solution. But this elegant solution still lacks automatic symmetry of the elements. For example, we have 3 columns, and 4 elements, then it would be good for the quadruple element to be in the middle, and if there are five elements, then it would be good for them to be displayed on different sides. Tell me how this can be done dynamically and maintainably with a grid. Thank you
It can’t
@@Gearyco And with Flex containers this is possible, but how can you do it as conveniently as with grid?
@@turvodnikAs mentioned, it is just not possible to use grid for your use case. A grid is like a checkerboard; you just can't have a row of a grid with columns not vertically aligned with another row.
👍
If a row item spans to the whole row this break I think
Yep because that’s not a tic tac toe grid. The objective of the technique is to create a tic tac toe grid. If you have a different objective, you need to use a different technique.
.DRY {display:none;}
Thank you again