Flexbox or Grid challenge // which would you use to solve these?

The 5 challenges 👉 www.notion.so/kevinpowell/Fle...
Join my Discord Community 👉 kevinpowell.co/discord
I have strong opinions on when one should use flexbox or grid, and I realize that not everyone always agrees with me, so I put together 5 simple layout challenges to see what people in my Discord community would use, and compare it to my own thought process, and of course, you can do the challenges yourself before watching and let me know how wrong I am in the comments section!
🔗 Links
✅ The 5 challenges: www.notion.so/kevinpowell/Fle...
✅ Join my Discord community: kevinpowell.co/discord
✅ Breakdown of method used from my Discord community: docs.google.com/spreadsheets/...
⌚ Timestamps
00:00 - Introduction
01:00 - The challenges
01:46 - Challenge 2
03:20 - Challenge 1
07:16 - Challenge 3
14:33 - Challenge 4
18:46 - Challenge 5
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@bn5055]

Grid for layout, flexbox for components is rarely wrong

[@juliusuwuigbe7743]

I love the background gradient and filter you apply in your videos. You are applying your CSS skills in real life 😂.

[@ahmeddotgg]

it feels so proud to do all the recommended/simplest approach 😄

[@ruskasielu6261]

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

[@claradanielacavicchi9294]

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!

[@astolfoFredor]

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! 👍

[@jakubjenis736]

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.

[@sashinger5230]

17:55 Great stuff here, smooth solution! Always wondered why this is not the default behavior tbh.

[@lukedorny]

This.

[@jhasani79]

Awesomeness! I loved those challenges.

[@lukedorny]

That extra min() at 18:00 was the reason I watch your videos, Kevin. 🎉

[@archamedis]

Pretty cool and practical demo 🔥 Thanks man

[@smithjohn2367]

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; }

[@Shaheer-xs5os]

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! 💛

[@Donkeydoedel]

I see the advantages in using grid for 2nd exercise. But I prefer the code structure and readability with flexbox solution 😀

[@user-ik7rp8qz5g]

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.

[@ELStalky]

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.

[@shubhamrathod5933]

Best mentor ever :)

[@MrOliver1444]

Great one! Thanks.

[@LePhenixGD]

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.

[@boris7258]

Respect for showing trick with min(400px, 100%) for the grid. Huge thank you!

[@lukedorny]

This.

[@krisvanderven2367]

Challenge 5: I found having "align-items: center;" on the ".product" class so much easier.

[@JimKernix]

EXCELLENT!

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.

[@QwDragon]

align-content: safe center; could've solve this too. Seems like it finally got supported half an year ago.

[@pinnaclewd]

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).

[@12345678s5ef]

Thanks!!

[@alexandergeorgesquire220]

thanks enjoyable challenge

[@anzalaarfaq939]

can you make a video on how to add smooth transition on gradients

[@jordanaktiga]

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.

[@jybedesign]

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!

[@eccenux]

I used grid:grid on the last challenge too. Mostly because I could maybe use subgrid if I have more cards like that.

[@Onee007]

For last case I prefere use flex, just add flex: 1 & width: 50% for both and for text just use align-self propety :)

[@wasimking1]

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 😂

[@justingiovanetti]

The first challenge my first thought would be inline block. Flex box wraps, kinda similar anyway.

[@richardz6049]

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😂

[@liangfamily]

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?

[@AndreT-zq6rp]

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... 👏

[@korduran]

For Challenge 5 grid-auto-row: 1fr can also get all grid items equal full hieght.

[@PicSta]

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.

[@jordondavidson3405]

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.

[@manuelsandoya]

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'

[@MrgnUTube]

Flex lover here! Okay, you have to make more elements than grids sometimes, but it is more powerful for responsive UIs.

[@groovebird812]

But you don't want to tell us why

[@mebamme]

21:09 that is exactly what I did, and why I did it. (:

[@carolmckay5152]

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; }

[@QwDragon]

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; }

[@venomus9286]

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.

[@Ol3zhkO]

i would do flex on 5th one

[@Rubi-fn9uu]

I use flexbox for everything because I'm struggling with grid

[@nomadshiba]

flex is a fallback for me if it cant work with grid, then i fallback to flex

[@space_ace7710]

I love Flex and my friend loves Grid XD

[@KET0NES]

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)

[@groovebird812]

Could you explain why css frameworks use flexbox instead of grid for their grid component?

[@khamliantung]

is it OK to use place-items: center for the 5th challenge?

[@robertkaminski1781]

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."

[@voidmind]

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

[@nanke1987]

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)

[@york8567]

13:26 I don't understand why multiply by 999?

[@ujjwalsahore1797]

So i can learn frontend by picking templates and then creating them by myself without leaving in between? Or there is a shortcut?

[@KevinPowell]

Never really a shortcut to learning anything that won't leave holes in your knowledge. The more you practice, the better you'll get :)

[@quadrumane]

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.

[@balex259]

Both, grid for layout and flex most usually inside layout…

[@wkrwjsxkdla]

for the 5th one, why is height:100% needed for .product__content? i was confused about this too

[@user-lj9vl7vt5f]

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.

[@KevinPowell]

You'll have to click the 'edit on codepen' in the top right of each pen.

[@user-lj9vl7vt5f]

Cheers@@KevinPowell

[@Tony.Nguyen137]

@13:45 Where is the video for the flex-basis syntax

[@Hellow12397]

i think you channel logo nedd to be updated

[@panzerswineflu]

Always grid

[@TheTechHubSisters]

What is 1D?

[@HamzaNazir277]

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

[@ricksanchez-c-137]

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

[@fromagetriste]

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

[@KevinPowell]

I'm with Rick, focus on learning CSS itself well, then worry about frameworks.

[@HamzaNazir277]

ok sir , thanks for replying @@KevinPowell

[@artdooh]

15:39 it is not doing what it should. You are saing 3 - 2 - 1 column but on screen It goes 3 - 2 - 3

[@AlThePal78]

Challenge 5 grid because 2 columns always lol

[@AlThePal78]

Definitely confusing lol

[@s0l0r1d4]

team both here! ✋

[@Atractiondj]

display: none is a must-have for any layout!

[@fromagetriste]

your comment should have this property ;)

[@Atractiondj]

@@fromagetriste you are funny guy, hah haha

[@darkzone3295]

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

[@fromagetriste]

@@Atractiondj look at Darkzone's comment and see the (predictable) confusion you make to beginners lol

[@hayesmaker64]

hi friend and friends

[@ganta2080]

'Breakdown of method used from my Discord community:' -> Link broken

[@KevinPowell]

Thanks for letting me know, I just fixed it! ( docs.google.com/spreadsheets/d/1eo9ZlqW8T9Gbpl1rfccPyGmLZzdfhNhgiHPwKUmtGFA/edit?usp=sharing )

[@chikeziechinonso4671]

First to like and comment

[@fromagetriste]

i recommand any beginner to learn flexbox first, and learning Grid next year, if they need. I dont even know grid, dont waste time

[@KevinPowell]

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.

[@fromagetriste]

@@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

[@strategistaow3520]

wafaf

[@simoncallelaverde]

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.

[@simoncallelaverde]

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.

[@strategistaow3520]

fawfafa

[@larsartmann]

I'm not your friend.

[@viravongtong3644]

grid css team