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

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

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

I love Flex and my friend loves Grid XD

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.

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

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)

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

Grid for layout, flexbox for components is rarely wrong

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

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.

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.

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!

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

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

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

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.

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😂

Awesomeness! I loved those challenges.

team both here! ✋

hi friend and friends

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

i think you channel logo nedd to be updated

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

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

Always grid

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.

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

I love the background gradient and filter you apply in your videos.

You are applying your CSS skills in real life 😂.

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.

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

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

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

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

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

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

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

First to like and comment