Great video as always. For challenge number 5, I did it like this on my part. .product { display: grid; grid-template-columns: 1fr 1fr; place-items: center; .... } .product__content { display: grid; gap: 1rem; padding: 1rem; }
Kevin, I think you might just be the best youtube channel. I was just preparing an internal presentation on flexbox and grid based on your course and was about to make some flexbox vs grid examples and this just drops. Always such concise and easy to consume information. You single handedly helped me moved from css hater to css advocate. Kudos.
That extra min() at 18:00 was the reason I watch your videos, Kevin. 🎉
11 หลายเดือนก่อน +2
For the last one, I use to replace "align-content: center" by: grid-element > :first-child { margin-block-start: auto; } grid-element > :last-child { margin-block-end: auto; } It prevents some potential weird content loss on small height screens.
The key point to decide which one to use is to remember that grid is table v2. If a task feels like it has obvious solution with table, it will have obvious solution with grid, but most likely will require some magic to work with flex. Example - rigid layouts. And opposite scenario, when a task feels like it would be nightmare to do with table, flex most likely would be better for it than grid. Example - inherently fluid things like tags from challenge 2.
Sharing my insights during your video challenges: 1:45 (Challenge 2) - Totally agree! Your point captures it perfectly. 4:00 (Challenge 1) - Flex is effective, yet I agree that grid offers a smoother dynamic solution. 8:00 (Challenge 3) - Completely share your view; both grid and flex work, but personally leaning towards flex. 11:45 (Challenge 3) - While the solution works, it doesn't align with the principle of parsimony. 14:33 (Challenge 4) - Adopted your approach with the repeat + minmax, solid choice. 15:53 (Challenge 4) - It might not meet the challenge, but discovering the flexbox's role in achieving that dynamic design was eye-opening! 18:58 (Challenge 5) - A bit guilty here; broke the rules and used both grid and flex for that layout.
I also cheated and utilized both for challenge 5. One thing I did differently than you when working it out was I put align-items:center on the outermost grid, which centered .product__content with no other fiddling necessary.
For the first one, grid also makes it easy to prevent layout shifts from the image loading in later (if the image size is not fixed elsewhere). You can use a fixed first column and the text will stay in place while the image loads. The same can even be true for HTML streaming in over a slow connection, e.g. in the multiple products cases. If you use flexbox with growing items or a grid with auto-fit and new items load in, existing items can shrink and things can start wrapping etc.
The last solution has taught me that there is a better way than flex-direction: column; I was using column direction too often... thanks for this video btw! 💛
Wow, I love messing around with CSS, and finding your channel definitely made my CSS evolve to the next level. Thanks for all the videos, I'll keep studying! 👍
Thank you a lot for this video! I guess you already know this trick, but for people who don't, adding this line to your CSS would turn your HTML framework into a "blueprint", that help a lot when working with flex and grid :) --- --- --- * { --h:240; opacity: .9; background: hsl(var(--h),100%,90%) !important; border: 5px solid hsl(var(--h),100%,50%) !important; /**/ } --- --- --- You can also remove the [opacity] and simply play with these colors and apply the code to different elements (the div, the img, etc.) --h:0 = Red --h:120 = Green --h:240 = Blue --h:60 = Yellow --h:180 = Cyan --h:300 = Magenta --- --- --- Adding a [/*] just before the [--h] will fully deactivate the code (that's why we need to keep the [/**/] at the end). Useful to switch the border on/off easily when working with code like this: img { --h:240; opacity: .9; background: hsl(var(--h),100%,90%) !important; border: 5px solid hsl(var(--h),100%,50%) !important; /**/ width: 100%; } --- --- --- If you didn't alrady have a video about this trick yet, maybe it would be a good one to consider. I think it can help newcomers a lot :) Best to you!
If layout is your target, grid is the answer. If content is the target, use flex. You have to be clear about your intent. Flex and Grid are just tools, no intent. I still can't unsee grid line/column naming and implicit areas... 👏
For challenge#5 for .product I used display: grid with grid-template-columns: 1fr 1fr; place-items: center;. To stretch the button to take full width I did .product__content { display: grid;} thats it.
In most cases, you want to use CSS Grid instead of flex box. Only if you have something to you want to align 1 dimensional, I think of flex box immediately. Flex box often leads to hacks or extra lines of CSS to get the desired behaviour. There are also people going for the flex box always solution and flex their way through. The quick and dirty solution. CSS grid also gives less hassle dealing with media queries. In a time when we don't design for explicit device widths, grid is just the better solution 90% of the time.
Challenge 5: I used grid all the way. On the .product div for the 2 equal columns, on the .product__info div for vertical centering, and on the .product__content div for the full-width button.
on challenge 5 ... why do you need another grid inside the right half? you can just set "align-items: center;" on .product ? (sure, you can't add gap, but wasnt sure if that was required / part of problem)
For 5th I mostly do both, sometimes it’s not about painting a masterpiece, rather just getting it done and go home and play with kids or do something fun. life is too short man if it looks good on all devices that’s all the client needs 😂
Great video Kevin. I personal feel using FB for some of these requires what I would class as hacks. I'm a big user of grid as it gives me absolute control as not too concerned how much code I have to write (media queries).
For Challenge 4, i used @media queries to toggle between number of columns respective to screen size. I guess that is lengthier but it would give us more control and specificity?
Having fun doing these challenge, thanks! On the last challenge, I think you wanted to vertically center on the parent '.product { align-items: center; }' right? That way you don't need to set the height: 100% on '.product__content'
I know that both Flexbox and Grid can be used together, but from experience I find that relying on the easier Flexbox means I'll never spend time learning Grid properly. As someone whose job is 90% JS, 10% CSS, I have to focus my memory on what gives me more bang per buck, and that is Grid
Maybe it's just my browser, but the link to the explanation of the 999 trick does not link to a different video (it just points to a section of the same video)
I always have to use a grid layout when I need a gap, because older iPhones' Safari doesn't support the flex gap, and these devices are usually included in the browser compatibility list."
I am beginner learner and I am in a confusion the matter is that I learned CSS and I have seen some video that it is necessery to learn any framework after having a little knowledge of CSS please guide me to go furthur that I learned tailwind CSS or Go with this css please give your advice
in my opinion its not necessary, but tailwind and sass/scss have their benefits. For now im sticked with regular css boosting my look and functionality with JavaScript
use 90% if energy learning pure CSS and flexbox, and then you can spend 10% energy learning Tailwind. Build at least one or two landing page with pure CSS including a Navbar. Me i didnt like SCSS, and most youtubers use Tailwind in advanced tutorials
It is weird, although I don't code that often anymore, I have coded around 30 - 50 websites in the past, and I still code sporadicaly like today. I have NEVER used "grid" in a real project, ever, and had never seen a need to. I feel "flexbox" was indeed what we needed for YEARS and YEARS! But I don't see the need of grid, I feel designs end-up very restricted for wanting to use grid. I also don't want my HTML or Layout to rely 100% in a stylesheet, and if removed it becomes a total complete random mess. There is NO layout or responsive design that I can't competely re-create using a mix of "flexbox" and maybe "position:absolute" for small footer icons and stuff. I know for some things you can use like 1 line less with grid than flexbox, but I would rather have ALL in flexbox even if I have to set a size or one more line.
I love you Kev, but I wouldn't want to use that weird "--breakpoint" using grid :S what? rather than using a normal "media-query" using flexbox. That's insane OMG, and seems a bit hacky, making a value negative to break "grid"? although it works. But why are people doing this? It seems like complicating their code with no real reason. Media-queries had always been simple, and always reliable. But that's just me. I prefer to use the default "flex-direction:row" and change it to "column" in mobile, or viceversa. Simple, easy, readable, and re-usable.
I actually think grid should be taught first. Not everything, because you can get into the weeds of it, but if you stick to the basics, it's easier to use and understand how it's working than flexbox, and, in my opinion, more applicable to a wide range of layouts. Flexbox for sure has it's place and shouldn't be ignored, but I'd always go with grid first these days when teaching new students.
@@KevinPowell i hear your points although i respectfully disagree because for small individual divs, it's easier to center them, of push them to the right side etc, because grid is a bit more complex and many times you end up using flexbox inside your grid layout, whereas flexbox is quick to learn and get your page look decent enough to let you keep going forward into your learning process, and let you jump to JavaScript and React faster. We both have différent point of view, me personally i learnt both and ended up focusing on flexbox, which doesnt mean everybody should do the same
Great video as always.
For challenge number 5, I did it like this on my part.
.product {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
....
}
.product__content {
display: grid;
gap: 1rem;
padding: 1rem;
}
it feels so proud to do all the recommended/simplest approach 😄
Kevin, I think you might just be the best youtube channel. I was just preparing an internal presentation on flexbox and grid based on your course and was about to make some flexbox vs grid examples and this just drops. Always such concise and easy to consume information. You single handedly helped me moved from css hater to css advocate. Kudos.
That extra min() at 18:00 was the reason I watch your videos, Kevin. 🎉
For the last one, I use to replace "align-content: center" by:
grid-element > :first-child {
margin-block-start: auto;
}
grid-element > :last-child {
margin-block-end: auto;
}
It prevents some potential weird content loss on small height screens.
align-content: safe center; could've solve this too. Seems like it finally got supported half an year ago.
The key point to decide which one to use is to remember that grid is table v2. If a task feels like it has obvious solution with table, it will have obvious solution with grid, but most likely will require some magic to work with flex. Example - rigid layouts.
And opposite scenario, when a task feels like it would be nightmare to do with table, flex most likely would be better for it than grid. Example - inherently fluid things like tags from challenge 2.
Sharing my insights during your video challenges:
1:45 (Challenge 2) - Totally agree! Your point captures it perfectly.
4:00 (Challenge 1) - Flex is effective, yet I agree that grid offers a smoother dynamic solution.
8:00 (Challenge 3) - Completely share your view; both grid and flex work, but personally leaning towards flex.
11:45 (Challenge 3) - While the solution works, it doesn't align with the principle of parsimony.
14:33 (Challenge 4) - Adopted your approach with the repeat + minmax, solid choice.
15:53 (Challenge 4) - It might not meet the challenge, but discovering the flexbox's role in achieving that dynamic design was eye-opening!
18:58 (Challenge 5) - A bit guilty here; broke the rules and used both grid and flex for that layout.
17:55 Great stuff here, smooth solution! Always wondered why this is not the default behavior tbh.
This.
I love the background gradient and filter you apply in your videos.
You are applying your CSS skills in real life 😂.
This is exactly what I needed ! Please do more stuff like this, to help us choose between different options, as it's sometimes hard when you start off
Kevin, I really love you! I understood, at last, all you taught and it's not a simple subject to understand! Thank you very much!
Respect for showing trick with min(400px, 100%) for the grid. Huge thank you!
This.
I also cheated and utilized both for challenge 5. One thing I did differently than you when working it out was I put align-items:center on the outermost grid, which centered .product__content with no other fiddling necessary.
Great job Kevin. Thank you.
I see the advantages in using grid for 2nd exercise. But I prefer the code structure and readability with flexbox solution 😀
Best mentor ever :)
For the first one, grid also makes it easy to prevent layout shifts from the image loading in later (if the image size is not fixed elsewhere).
You can use a fixed first column and the text will stay in place while the image loads.
The same can even be true for HTML streaming in over a slow connection, e.g. in the multiple products cases.
If you use flexbox with growing items or a grid with auto-fit and new items load in, existing items can shrink and things can start wrapping etc.
Grid for layout, flexbox for components is rarely wrong
The last solution has taught me that there is a better way than flex-direction: column; I was using column direction too often... thanks for this video btw! 💛
For challenge 5 I did:
.product {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
.product__content {
display: grid;
gap: 1em;
padding: 2rem;
}
Wow, I love messing around with CSS, and finding your channel definitely made my CSS evolve to the next level. Thanks for all the videos, I'll keep studying! 👍
Challenge 5: I found having "align-items: center;" on the ".product" class so much easier.
Thank you a lot for this video!
I guess you already know this trick, but for people who don't, adding this line to your CSS would turn your HTML framework into a "blueprint", that help a lot when working with flex and grid :)
--- --- ---
* { --h:240; opacity: .9; background: hsl(var(--h),100%,90%) !important; border: 5px solid hsl(var(--h),100%,50%) !important; /**/ }
--- --- ---
You can also remove the [opacity] and simply play with these colors and apply the code to different elements (the div, the img, etc.)
--h:0 = Red
--h:120 = Green
--h:240 = Blue
--h:60 = Yellow
--h:180 = Cyan
--h:300 = Magenta
--- --- ---
Adding a [/*] just before the [--h] will fully deactivate the code (that's why we need to keep the [/**/] at the end). Useful to switch the border on/off easily when working with code like this:
img {
--h:240; opacity: .9; background: hsl(var(--h),100%,90%) !important; border: 5px solid hsl(var(--h),100%,50%) !important; /**/
width: 100%;
}
--- --- ---
If you didn't alrady have a video about this trick yet, maybe it would be a good one to consider. I think it can help newcomers a lot :)
Best to you!
Pretty cool and practical demo 🔥 Thanks man
Awesomeness! I loved those challenges.
If layout is your target, grid is the answer.
If content is the target, use flex.
You have to be clear about your intent.
Flex and Grid are just tools, no intent.
I still can't unsee grid line/column naming and implicit areas... 👏
can you make a video on how to add smooth transition on gradients
13:26 I don't understand why multiply by 999?
For challenge#5 for .product I used display: grid with grid-template-columns: 1fr 1fr; place-items: center;. To stretch the button to take full width I did .product__content { display: grid;} thats it.
For last case I prefere use flex, just add flex: 1 & width: 50% for both and for text just use align-self propety :)
I used grid:grid on the last challenge too. Mostly because I could maybe use subgrid if I have more cards like that.
In most cases, you want to use CSS Grid instead of flex box. Only if you have something to you want to align 1 dimensional, I think of flex box immediately. Flex box often leads to hacks or extra lines of CSS to get the desired behaviour. There are also people going for the flex box always solution and flex their way through. The quick and dirty solution. CSS grid also gives less hassle dealing with media queries. In a time when we don't design for explicit device widths, grid is just the better solution 90% of the time.
For Challenge 5 grid-auto-row: 1fr can also get all grid items equal full hieght.
Challenge 5: I used grid all the way. On the .product div for the 2 equal columns, on the .product__info div for vertical centering, and on the .product__content div for the full-width button.
The first challenge my first thought would be inline block. Flex box wraps, kinda similar anyway.
on challenge 5 ...
why do you need another grid inside the right half? you can just set "align-items: center;" on .product ?
(sure, you can't add gap, but wasnt sure if that was required / part of problem)
Great one! Thanks.
@13:45 Where is the video for the flex-basis syntax
Here are my solutions:
1. display: grid; grid-template-columns: auto 1fr; gap: 1em; // expected flex to require reset of flex-shink for an image
2. display: flex; flex-wrap: wrap; gap: .5em;
3. .featured-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; @media (max-width: 800px) { grid-template-columns: 1fr; } }
4. display: grid; gap: 1em; grid-template-columns: repeat(auto-fill, minmax(max(300px, 26%), 1fr)); // Haven't thought about 100%, but thought about limiting 4 columns
5. .product { display: grid; grid-template-columns: 50% 1fr; } .product__content { height: 100%; box-sizing: border-box; padding: 2em; display: grid; gap: 1em; align-content: center; }
For 5th I mostly do both, sometimes it’s not about painting a masterpiece, rather just getting it done and go home and play with kids or do something fun. life is too short man if it looks good on all devices that’s all the client needs 😂
Great video Kevin. I personal feel using FB for some of these requires what I would class as hacks. I'm a big user of grid as it gives me absolute control as not too concerned how much code I have to write (media queries).
EXCELLENT!
For Challenge 4, i used @media queries to toggle between number of columns respective to screen size. I guess that is lengthier but it would give us more control and specificity?
thanks enjoyable challenge
Having fun doing these challenge, thanks!
On the last challenge, I think you wanted to vertically center on the parent '.product { align-items: center; }' right? That way you don't need to set the height: 100% on '.product__content'
Thanks!!
15:39 it is not doing what it should. You are saing 3 - 2 - 1 column but on screen It goes 3 - 2 - 3
Still recovering from float based lay-outs and just happy to have build a simple site using flex-box. Happy to learn grid but not now😂
Flex lover here!
Okay, you have to make more elements than grids sometimes, but it is more powerful for responsive UIs.
But you don't want to tell us why
I know that both Flexbox and Grid can be used together, but from experience I find that relying on the easier Flexbox means I'll never spend time learning Grid properly. As someone whose job is 90% JS, 10% CSS, I have to focus my memory on what gives me more bang per buck, and that is Grid
Maybe it's just my browser, but the link to the explanation of the 999 trick does not link to a different video (it just points to a section of the same video)
21:09 that is exactly what I did, and why I did it. (:
I always have to use a grid layout when I need a gap, because older iPhones' Safari doesn't support the flex gap, and these devices are usually included in the browser compatibility list."
Could you explain why css frameworks use flexbox instead of grid for their grid component?
is it OK to use place-items: center for the 5th challenge?
flex is a fallback for me
if it cant work with grid, then i fallback to flex
Hey, Kevin. Sorry, but the CSS panel of the codepen of the first challenge (I have not checked the rest of them yet) didn't let me to type in it.
You'll have to click the 'edit on codepen' in the top right of each pen.
Cheers@@KevinPowell
FYI, just noticed Edge bizarrely refuses to support avif files, so folks like myself might find a fair bit of confusion that the images don't show.
So i can learn frontend by picking templates and then creating them by myself without leaving in between? Or there is a shortcut?
Never really a shortcut to learning anything that won't leave holes in your knowledge. The more you practice, the better you'll get :)
I use flexbox for everything because I'm struggling with grid
What is 1D?
I love Flex and my friend loves Grid XD
I am beginner learner and I am in a confusion
the matter is that
I learned CSS and I have seen some video that it is necessery to learn any framework after having a little knowledge of CSS
please guide me to go furthur that I learned tailwind CSS or Go with this css
please give your advice
in my opinion its not necessary, but tailwind and sass/scss have their benefits. For now im sticked with regular css boosting my look and functionality with JavaScript
use 90% if energy learning pure CSS and flexbox, and then you can spend 10% energy learning Tailwind. Build at least one or two landing page with pure CSS including a Navbar.
Me i didnt like SCSS, and most youtubers use Tailwind in advanced tutorials
I'm with Rick, focus on learning CSS itself well, then worry about frameworks.
ok sir , thanks for replying @@KevinPowell
Both, grid for layout and flex most usually inside layout…
i think you channel logo nedd to be updated
i would do flex on 5th one
'Breakdown of method used from my Discord community:' -> Link broken
Thanks for letting me know, I just fixed it! ( docs.google.com/spreadsheets/d/1eo9ZlqW8T9Gbpl1rfccPyGmLZzdfhNhgiHPwKUmtGFA/edit?usp=sharing )
team both here! ✋
display: none is a must-have for any layout!
your comment should have this property ;)
@@fromagetriste you are funny guy, hah haha
why is that ?
btw I am a student learning web development for a little while it would be helpful if you could explain it to me
@@Atractiondj look at Darkzone's comment and see the (predictable) confusion you make to beginners lol
It is weird, although I don't code that often anymore, I have coded around 30 - 50 websites in the past, and I still code sporadicaly like today.
I have NEVER used "grid" in a real project, ever, and had never seen a need to. I feel "flexbox" was indeed what we needed for YEARS and YEARS! But I don't see the need of grid, I feel designs end-up very restricted for wanting to use grid.
I also don't want my HTML or Layout to rely 100% in a stylesheet, and if removed it becomes a total complete random mess.
There is NO layout or responsive design that I can't competely re-create using a mix of "flexbox" and maybe "position:absolute" for small footer icons and stuff. I know for some things you can use like 1 line less with grid than flexbox, but I would rather have ALL in flexbox even if I have to set a size or one more line.
Always grid
Challenge 5 grid because 2 columns always lol
Definitely confusing lol
I love you Kev, but I wouldn't want to use that weird "--breakpoint" using grid :S what? rather than using a normal "media-query" using flexbox. That's insane OMG, and seems a bit hacky, making a value negative to break "grid"? although it works. But why are people doing this? It seems like complicating their code with no real reason. Media-queries had always been simple, and always reliable. But that's just me.
I prefer to use the default "flex-direction:row" and change it to "column" in mobile, or viceversa. Simple, easy, readable, and re-usable.
hi friend and friends
i recommand any beginner to learn flexbox first, and learning Grid next year, if they need. I dont even know grid, dont waste time
I actually think grid should be taught first. Not everything, because you can get into the weeds of it, but if you stick to the basics, it's easier to use and understand how it's working than flexbox, and, in my opinion, more applicable to a wide range of layouts. Flexbox for sure has it's place and shouldn't be ignored, but I'd always go with grid first these days when teaching new students.
@@KevinPowell i hear your points although i respectfully disagree because for small individual divs, it's easier to center them, of push them to the right side etc, because grid is a bit more complex and many times you end up using flexbox inside your grid layout, whereas flexbox is quick to learn and get your page look decent enough to let you keep going forward into your learning process, and let you jump to JavaScript and React faster. We both have différent point of view, me personally i learnt both and ended up focusing on flexbox, which doesnt mean everybody should do the same
wafaf
fawfafa
First to like and comment
I'm not your friend.
grid css team