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; }
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.
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.
Grid for layout, flexbox for components is rarely wrong
8 месяцев назад
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.
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.
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.
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! 💛
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!
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! 👍
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 😂
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... 👏
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.
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 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.
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
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).
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."
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'
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)
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)
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?
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 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
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.