One might say grids are better for grid like layouts, and flex for flexible layouts

@matejlaskomulej

19 күн бұрын

Oh you

@CristianKirk

19 күн бұрын

Like var for variables and const for constants.

@pulkitmethaniya6471

19 күн бұрын

😂​@@CristianKirk

@ahora1026

19 күн бұрын

XD

@capdestre2399

18 күн бұрын

Now, define flexible and grid layout you smarty

If the elements should all be the same size as each other, grid is better. If the elements should each have unique sizing or determine their sizing in unique ways, then flex is better. You can do most things with both, it's just which is easier.

I honestly consider you are THE best css teacher ever! It's been a while since I've seen one of your videos, as in the last year my career has shifted to backend dev, but the knowledge I gain from every single one of your videos is amazing. Thank you so much for the great work you do!

I just created a new list called 'Amazing CSS videos', just to keep this one close. Very ilustrative! Your content is pure gold, Kevin! Thanks for sharing

I came back to web development from the days when you structured sites using tables! So grid seemed to be so much more straightforward and structured that flex, but your description hear makes the most sense I've ever seen or read about the differences. Thanks

You absolutely nailed it with this vid mate, biggups

You are the best teacher ever.

Everytime I learn something new from your channel. Thank you CSS God!

This tip has been helpful for me most of the time when deciding between flex and grid: Use flex when the parent is a list and adding or removing children does not require any changes in the layout related code. For example, list of links in footer, list of social media icons, list of cards, etc. Use grid when there is a fixed number of children. For example, card with icon, title and description, the main layout of the page (navbar, sidebar, main content, footer).

You get such a good like to views ratio on your videos because of content like this. Not too long, not too short, informative. We could do with Kev’s in a bunch of other different avenues of tech.

Grid - parent container control content distribution Flexbox - content distribution is defined by content sizing itself

I don't know if I said this on any of your videos or not but you actually made me fall in love with default css ❤

Thank you sir! I didn’t know flex basis only looks at the content box regardless of the box sizing value. I think this has been a long missing piece for me, and now I feel I have fully mastered flex box.

top notch tut thxs

Great content!

That was so useful bro

I always use flexbox and never had a problem even with responsive view

Part of the reason grid (or anything else) seems so complicated is people tend to just experiment with it rather than go the documentation and learn it. The documentation for grid and flexbox is excellent. Kevin doesn't just know this stuff by magic, he actually learns it. It can be quite interesting to go through the different options in the documentation and see what they do. Thankfully, there is also people great at explaining the options like Kevin.

@Azurryu

18 күн бұрын

You'd be surprised about my previous job in a web dev agency, where I solved 99% of my colleagues problems by copying the first answer from google into our chat... I was literally blamed when a colleague couldn't do anything the entire week because I didn't respond. She could've just copied the error message from the browser console into google herself and got the answer in the first stack overflow result but it's my fault lmao

I often just use flex for everything unless I want a table-like structure. Interestingly at work most colleagues use grid for everything instead, unless the specific behavior of matching content size is needed. One thing that's worth mentioning, grid is way easier to make responsive. you just start with 1 column, media query to something large for 4, medium for 3, small for 2 and you're good to go. Flex isn't as easy, unless you only have one breakpoint and can switch direction there.

Man your videos are absolutely PURE GOLD! You awesome!

I feel that a lot of devs are kinda of tethered to old concepts, and they are teaching new devs with these old concepts. The result is a lot of mixing of old concepts with (sometimes) new techniques, creating a code that's hard to maintain and mainly unreliable. IMHO, things like Tailwind kinda prevent devs to learn such techniques, concepts and real modern CSS. So that's why your channel is SO AWESOME. Thanks

thanks alot

I was asked this in an interview and I gave them the same 1D, 2D logic 🙃.

Flex = fill in stuff --- Grid = organise stuff

After your video I realized the importance of specialization in every field. Like you are only an expert in CSS at a kind level. We should always focus on one thing first.

For me this is how I distinguish them: Flexbox : child control layout, uneven widths, uneven scaling of children width like when required to center children wrt parent for uneven childrens. Grid: parent control layout, fixed widths, fixed layout and even scaling of childrens width.

This is why I've always said flex cares about about one layout direction, Grid cares about both. Otherwise they're very similar which makes sense since Grid is build on Flex under the hood. One of the things back when Grid first came out was it seemed like using Grid could actually cause layout performance issues vs. Flexbox so if you only wanted one direction you just did Flex. That's largely not a thing anymore, though but the advice (boiled down to simple statement so juniors know what to do) never updated. More and more I find myself defaulting to Grid, though. It just flows more reliably.

@aleksander5298

19 күн бұрын

grid is not build on flex under the hood :) stop talking bullshit, maybe async/await is build on promise? :))

Great video. A very common misconception

Great video! Video request: Best way to responsively style a blog post? In particular, a floating table of content / social share bar, images, content etc.

I could not agree with this more!!!

I am definitely guilty of reaching for flexbox because of familiarity. But I grabbed some amazing tips on using grid from another one of your videos and use it on basically all of my sites.

In that 2nd example, the grid layout, on a width where you have 3 columns; How would you make the last cell with the text "Sequi". span until the last grid line in a dynamic way? I'm not 100% up to date with the latest grid stuff, but can grid do this? Or do we still need to flex it?

amazing, I actually changed my mind mid vídeo

THIS IS INSANELY GOOD! I just love it!

Really, the clue is in the name for me. If I want a structured grid system I will use Grid. If I need to control the layout of items on a page, flexbox is excellent

Im learning from you lot of things and I have got your point when you explaining when to decide what to use for specific layout and this will become some way intuitive with experience. BUT... when it comes to explain to a beginner difference between these two I will still use 1D & 2D as you say "nonsense" because IMO it is for beginners easier to understand as introduction and starting point.

@KevinPowell

17 күн бұрын

I think that sets them up for issues going forward though, because that's the model they'll follow as they gain more experience. I see very experienced devs who still use that as their approach, and it leads to them having to create more complex solutions because of it. It's also why I like teaching grid first now. Not all of it, but the very basics of it. It gives them an idea of how it works, and they feel comfortable with it because everything sort of does what you tell it to do. But then, it's easy to find examples like a navigation, or other more "inline" things where flex is just perfect, and it fills in that gap where grid doesn't really work well. All that to say, I don't think my way is the only way to teach something, I'm just wary of teaching something where I have to tell people later on that "well, actually..."

@Mexad0n

17 күн бұрын

@@KevinPowell Look, I have got your point but we're looking on these niche "issues" from our experienced devs perspective. I would like to see faces of dev beginners when watching this video as IMO they would have not a clue what you are talking about and why it is an issue. I see that many new "devs" use these days CSS Grid only because they do not know what is "flex-basis", "flex-grow" etc. and how to work with these. They just set `display: flex` and that's it. CSS Grid is for them easier to use 🙃. That is my point, explain it in simplest way as possible that they will understand eg.why will be better use Flex for navigation instead of Grid etc. 🤷‍♂ hey kid, you can walk, "well, actually..." you can also run. 🤫

hey kevin thanks for ur videos i need some help please with how to turn a xd link to html css how to use them to make that website from that design respecting that design please i will be gratefull if u answer me

Cool content as always. By the way “Hic!” is nose in Ukrainian language. (5:43 pre last box). Happy learning)

Thank God i never thought that way of one is better for 1D and other is for 2D. I just go with the one works better and/or is easier to use on a case by case basis.

i once hat a problem. i wanted a 2 column layout with tiles and used flexbox. when i added a gap it would break the 2 by X thing and i got 1 column instead. this resulted in weird behavior. I replaced the flexbox with a 2 column grid and now its working nicely. Sometimes i still get confused in what to use when. because flexbox seemed fitting for me but it wasnt. This video clarifies stuff for me. :)

0:17 Quote _"You don't have to tell them they're wrong, you can just send them this video"_ That would be great, except for the fact that this is a *highly nuanced and opinionated topic* where the answer is in the subtleties of different perspectives. For example, when teaching a beginner, it's much easier to help them get up-to-speed by understanding the difference in intention between Flexbox and CSS Grids. Beginning by explaining that one is designed more with 1D in mind and other is designed more with 2D matrices in mind, is very helpful. I'm a big fan, Kevin, but ignoring critical thought or unique perspectives, in favor of forwarding generic advice, I don't believe that's the best approach for such a nuanced topic.

@KevinPowell

12 күн бұрын

I disagree with teaching it that way to a beginner. I feel like it simply builds bad habits they have to break later. I think it's easy to keep both of them simple, without going down that route. I prefer starting with grid, because it's easier to understand how it's working (there is less "magic" to it). You make a grid, you place items in the grid (not diving into *everything* there is to know about grid, of course). You quickly run into the limitation when you want items next to each other that take up different amounts of space (like a navigation), and flex then comes to the rescue. I've had a lot of success with people taking that approach, and as they gain more knowledge of both flex and grid, they have a good baseline of what the strengths are for both of them.

@KevinPowell

12 күн бұрын

I'm also going to say that intro was a little bit of a joke, and I realize there is a lot of nuance in all of this :)

I also think a good use of grid vs flex is if you want elements to be laid out in a grid differently at different breakpoints. For example, at desktop size, I might have an image on the right and text on the left of a basic 2-column horizontal layout, but then at mobile sizes, I want the image to display underneath the text in a 2-row layout. I know flex could work for this very basic example, but I’ve used this for making many changes to the layout of something like a card as the screen size decreases, without using a different element or lots of display property changes.

I wish Kevin had tutorials on more languages such as JS,PHP or C++.. Hands down the best teacher on KZread

One important benefit of using grid is that it reduces nesting of element. This reduces element count and thus leads to performance improvement. This can be useful in improving Lighthouse score. For example, if there is a card with an icon on left and title and description on right, grid can have all three elements at same level in DOM tree, while in flex, the title and description elements have to be wrapped in an extra element. So, one less element in grid.

One scenario where I find grid not doing its job is say when I have a header, body and footer. I want my header and footer to stick to their top and bottom edges of viewport, while I want the body to adapt its height based on the remaining viewport. With flex, I just give the child flex:1 and it does the job. Maybe my understanding of grid is low. How do I do this with grid ? Anyone ?

I still don't know how to do design where i.e. on LG then we have 3 columns 3x33% but on MD we have 2x50% and 1 below 100%. For XS 3x100%. Any idea?

Hello Sir how can i make grid direction reverse

Grid may have non-obvious behaviour with min-width when we run into unexpected scroll bar. It would be great if you show how it definitely works and how to solve that problem.

I wish my mind could grasp Grid at all. Reading it is like "I will never remember all of this syntax" on top of how much of a nightmare editing themes from someone who used Grid tends to be. I'm sure it's just a matter of finding a breakdown that parses properly for my mind, but currently grid might as well be an ancient dead language to my mind.

i like the camera layout

My previous technical leader was worse. It wanted us no never user flex, because “now, there’s grid that can do everything”.

Where I use grid a lot is when you get those annoying layouts that have content in different positions on desktop and mobile. I hate duping content so will use grid-template-areas. Really handy. The only place in layouts grid falls down is you can’t center the items like in flexbox. So you’ve got 4 col list of cards and the last couple of items are on their own line. Flexbox can obviously centre these easily. If grid could somehow do similar it would be great.

You're awesome man ❤

on the second example u gave the titles from css pseudo-classes after "FLEXBOX/GRID". Why not usindo HTML ?

🔥🔥🔥

What do I use for 4D Layouts?

grid for absolute allocation of children, flex for relative

Thanks for sharing helpful knowledge 😊❤

this is honestly crazy. I was just thinking about it this morning and was changing my mind.

I see it now... Default to grid, use flex where grid does not reach 🧠

6:29 - imho this does not refer to a 2d layout, as those tags/pills/items are a 1 dimensional list floating linear based on the contents. 2d would be having a 3 by 3 grid and placing one item in the top right and one item in the bottom left without any items in between.

I never understood the argument between "1D" and "2D" either. I use grid or flex depending on the need of the layout.

I find myself liking your videos before watching them and by the end of the video wishing for double likes. 👍👍

The start of the video radiates "stop posting about among us" vibes so much

The reason for this rule of thumb isn't that everyome believes you can only do 1D with flex, or only 2D with grid. Just that it often becomes the best choice. As long as designers keep designing structured, gridlike layouts in 2D but with arbitrary, flexible layouts in individual rows or columns, this convention will remain

Cool

Flex is for flexing, grid is for gridding. 👍

On my custom WordPress theme, I let the user define the total content width (ex. 1920px). Then I divide this into 12 equal blocks, minus 11 small blocks for the gap between them. The result of each block's width I name it --x-1. Then I create 12 different classes: --x-12 : has width equal to 12 blocks. --x-11 : has width equal to 11 blocks, and so on until --x-1. Finally the user, assuming they want to create a 3-column layout, they simply add a class name of .x-3 in all 3 children and the parent has a .x-9 class name and a simple display:flex; This way, by using simple flexbox, the user can just write Bootstrap-like class names and never bother with writing CSS for basic layouts. The beauty of it is that it doesnt require a single line of CSS to make them responsive. I use flexbox mostly because I find it straightforward and I use grid on complex layouts.

Grid isn't responsive per se that's my only issue with grid so I tend to use min-max auto-fit for such occasions.

I use grid everywhere, and only use flex when I feel grid is tooo verbose for that usecase. Also flex grow, shrink and basis are still some of those css concepts that my head just fails to register 😂. So, yeah, grid ftw 😂

Thanks a lot! I will need to practice grid for 1D more.

Never heard about this... gonna keep using each of them depending on what I need/want.

You can fix the fact that box-sizing: border-box; isn't working on the flex item (with padding) by setting the following on the flex item /* Assuming box sizing is "border-box" on all elements */ * { box-sizing: border-box; } .flex > * { flex-basis: auto; min-width: 0; width: fit-content; padding: 10px; } It's only that flex-basis doesn't work with box-sizing since flex-basis targets the content-area of the box inside the flex item not the flex item itself.

@KevinPowell

12 күн бұрын

That works the same, you can see it in this codepen: codepen.io/kevinpowell/pen/XWLXjzW It has nothing to do with width or flex basis, but how the grow/shrink is calculated by flexbox. Flexbox only looks at the content size for calculating that. If it didn't, it would result in the padding growing/shrinking as well, which people would not be happy with, lol. Flexbox looks at the content size only, will make the content size the same for all of them if it has to grow or shrink them, then add border + padding after that.

I use grid for pages layout, dont if it’s right but works well

@matejlaskomulej

19 күн бұрын

Same

@Tulio666

19 күн бұрын

@@matejlaskomulej nice! You on linkedin?

@Luxalpa

18 күн бұрын

Grid for page layout is exactly what it's for though. This is what allows your layout to completely change based on screen-sizes without needing to script it.

"Flex for alignment, grid for layout" - read that somewhere on the Internet and it stuck since.

I am still worried about browser support so if i find a solution with flexbox i prefer flexbox.

@KevinPowell

12 күн бұрын

Unless you work in a very specific environment (medical comes to mind, where they might still be running Windows XP), Grid's support is as good as anything else at this point.

I think this is a misunderstanding about what 1D and 2D means. All of your examples illustrate how grid has more built in control for rows AND columns (2D) where flex is only ever really concerned with rendering things as columns or rows (1D). Wrapping flex children does not make it 2D in the sense that the flex layout is concerned with the alignment of rows and columns. That's like saying floats are 2D because technically an author can create columns and rows using floated divs.

@KevinPowell

12 күн бұрын

If you go back to the early teachings, Rachel Andrew reffered to 1D and 2D in the way you're mentioning. The problem is, being year that, and don't think of control, they think "1D layout" and "2D layout" and don't think more than that. Anytime I ask how people decide, the *large* majority of answers are the overly-simplified explaination I gave, and I think that's why we should avoid thinking of it that way, because most people hear the keywords and run with their first impression from those.

I was just arguing about exactly this (1d Vs 2d) with one of my team members because he said he doesn't use grid for 1d layouts and I had to explain that grid gives u more control over the children

start learning grid, already saw how powerful grid is, but still kinda confusing for me rn

I went straight from divs in percent to grid so never bothered with flexbox.

Use Grid if you want layout to control the content. Use Flex if you want content to control the layout.

Grid is for Layout-Driven-Content Flexbox is for Content-Driven-Layouts

I only do tables lol

@antonio_carvalho

19 күн бұрын

You outed yourself, time traveller!

Grid functionality should have just been part of Flexbox. No good reason to have two separate concepts with so much overlap. Grid itself having overlap with table display but with more stuff. This creates issues where initially you need functionality that could be done by flex or grid, or maybe even table, then later the requirements change and now you can’t use flex, you need grid, or grid requires wonky workarounds and you’re better off with flex. Now you have to rework a bunch of things rather than just change/add/remove some attributes. You end up needing to change the html, maybe add/remove grid breakpoints, rethink the overall setup.

For a Navbar flexbox would be better .

They are both super needed. Depends on the use case.

why not just use "display: inline-block"?

@KevinPowell

17 күн бұрын

It's not really a layout tool, which both flex and grid are :) Inline block has it's use cases, but they aren't very frequent these days imo, with flex, and inline-flex. Flex opens up vertical center alignmnet, and we get `gap` instead of having to use margin, which is nice because it's only between the elements, among other things :)

I'm the proof! Cuz I do something wrong, and is that I don't care about "grid" But is just cause I have coded 30+ websites without it... I don't see a reason to use it I prefer to base in flexbox, and my own styles I have coded pretty complex layouts... You can code anything 'without' grid People don't know how it was, before flexbox. Flexbox was the game changer... not grid I feel this comes from Designers-only, who don't really know how it works. You hear that by Figma user who don't code, that: "auto-layout is like flexbox" when is not really either. I feel designs end up more... gridy, when you are thinking on using "grid"

@Luxalpa

18 күн бұрын

The problem is that flexbox doesn't give you full control, so in order for your flex layouts to work, you need to nest HTML elements (as you described, this is how it was done before flexbox as well). The main issue with nesting elements is that you can't make layout changes without scripting. i.e. if you have a mobile and a desktop layout of your app, you will need to have specific javascript code to handle the switches between the layouts. And if you're using a modern frontend framework like react you also get rerendering and stuff that you need to be careful with here. It also just in general makes your CSS and JS code way more complex. This is the main reason why grid exists.

@simoncallelaverde

18 күн бұрын

@@Luxalpa Grid didn't exist a few years ago, so anything you said makes too much sense The websites I mentiomed I coded 4 years ago and back (as I don't code too much now a days) I have coded VERY responsive layouts in Reacts, NextJs... Maybe you aren't as organized with your code, that's it Any app you can think of, was able to be coded without Grid. Grid is relatively new... And it DOESN'T exist to solve the problem you mentioned, it just exists... And it has been a slow process to reach full browser compatibility Grid is just a layout written in your CSS, too much CSS handling something that is best just handled in HTML and a bit of CSS As Kevin said as well, Grid is too much gridy... You are placing elements within a fixed grid Trust me, I can also use grid if I wanted, I don't...

@simoncallelaverde

18 күн бұрын

@@Luxalpa You can perfectly create a Mobile and a Desktop, or better a Responsive App just by using HTML (or JSX) and CSS using Flexbox and other CSS and SCSS styles, without Grid You can code Whatever You Want this way, without all the issues you mentioned

@KevinPowell

12 күн бұрын

I've been making websites since the late 90s, so I know the pain of creating layouts pre-flexbox 😅. Flexbox was the game-changer, in that it gave us an actual layout tool, for sure... but while it's *fantastic*, it doesn't do it all. There are some layouts they can both do, and some will be a lot easier with Flex, and others a lot easier with Grid, and then there are layouts only one can create. Since you came from table + float layout days, I feel like saying that you don't need Grid is the same as saying you don't need flex, because you have floats. Grid makes *a lot* of layouts easier to create, and by not bothering with it, you're making life harder on yourself imo.

Grid is the coolest, neatest kind of display imo.

@Mewa_BM

19 күн бұрын

Nope. Flex-box team

grid can do everything flex can do better in my opinion except for flex-wrap, thats when flex is useful

Grids are better for 2D layouts that should be static in nature, flex or grid can then be used to space children, using things like space between, yet flex box still has the advantage of being supported on older browsers where grid is not.

@KevinPowell

12 күн бұрын

Grid's browser support is as good as anything else at this point. Unless you work in a very specific environment that has to support very old devices, you can use it without any issues.

So I wrote my first div about a month a go. So a real noob. Which means I have no idea what 1D and 2D is. A 10 second description of those in videos good for noobs like me would be useful.

so in a way it is still true, but clickbaity titles are even better.

Very cool video, thank you. Why do frameworks like bootstrap use flexbox for the grid? I find it too hard. Grid is easier to understand.

@Luxalpa

18 күн бұрын

Bootstrap uses flexbox because bootstrap is older than grid and the framework was originally designed around flexbox.

I don't even know what 1D or 2D design is.

Now look at all your examples on Iphone 6 or lower

@bkrqbbit_cr

19 күн бұрын

No sense to do this, even uf there's people still using those devices, it ain't what most people use!

@ennioVisco

19 күн бұрын

Does it still connect to the internet?

@KevinPowell

19 күн бұрын

Grid has been supported by iOS since 10.2, which is iPhone 4S and newer devices... All iOS devices together that don't support it account for less than 0.1% of global internet users...

@marktheunknown1829

19 күн бұрын

Yeah and let's develop for iphone 1 and IE 1.0 as well...

@PerpetualWarr

19 күн бұрын

Muppet.

Grid supremacy

A flex layout that wraps is still considered a 1d layout.

@KevinPowell

12 күн бұрын

In terms of control over it, yes, but that's not how people see it when they think 1D or 2D. They see 1D as rows or columns, and they see 2D as rows *and* columns. I should have mentioned this in the video as well, because Rachel Andrew talked a lot about 1D vs. 2D in the early days of Grid, but not in terms of rows/columns, but in terms of control... the problem is, people don't go into the nuance of it, they go to the simplest way to make sense of it. Anytime I ask how people decide, the large majority of replies are based around the simple understanding of 1D and 2D, which is why I made this video :)

Cries in browser support

@KevinPowell

12 күн бұрын

What did I talk about that doesn't have good browser support?

this is way too advanced for me😅