box-sizing: border-box won't change this, as some comments have asked about. I had this in my code and should have shown it, but as I did show, flexbox is looking at the content-size, and not the box-size, so it doesn't have an influence here.

@baphometgaming1056

Жыл бұрын

Honestly, im not even a web dev but been lurking around for some time trying to get into web dev and im surprised it took You this long to actually prefer grid over flex for such things. Much love Kevin!

@Rowan11088

Жыл бұрын

Interestingly, if you have box-sizing: border-box AND add a flex-basis for the inner items of, say, 20%, they WILL all size the same. But if you use a flex-basis of 100% (which I'll often do if I don't know how many items will be present), it makes the middle one larger. I thought I understood flexbox pretty well - not sure what to make of this!

@velkanalpha

Жыл бұрын

exactly the reason for me enter the comments😄. Good Video

@evanoffhandson7067

9 ай бұрын

Thank you for joining the front ends in this corner of the internet@@baphometgaming1056

The lightbulb went on for me once you explained that flexbox uses the content size instead of box size. It had never occurred to me that the browser rendered each using distinct sizing rules. I had just sort of operated under the assumption that everything was like the box model starting from margin, to padding then to content, and never gave it more thought than that.

@chrisstucker1813

Жыл бұрын

CSS is a nasty beast. You could go years without ever realising this and one day you’ll be scratching your head for hours upon hours, wondering why an even-sized box-alignment isn’t working like it always has before just because you added some padding. And then, with luck, you’ll stumble across this video and immediately proceed to punch yourself in face multiple times.

This "Flexbox for 1-dimensional, Grid for 2-dimensional layouts" myth has been echoing around the web for way too long. Thank you for making this video. Grid is amazing.

@randomdev4246

Жыл бұрын

Alright, time to use 3-dimensional layouts😂

@levsonc

Жыл бұрын

It's not myth, that is still true. But yeah, grid treat width not like flexbox. Flexbox distributes free space, it's about packing things (like toolbars, where it originates from). Grid is for-well-setting a grid, more about organizing space. It's a different approach and a slightly different task.

@pegeeeeee

Жыл бұрын

@@randomdev4246 threejs?

@godnyx117

Жыл бұрын

@@levsonc Amazing comment!

@gbbarn

5 ай бұрын

Flexbox is the way.

Thanks Kevin, as usual, awesome content, very helpful!!

As always you are a wonderful teacher. I come from the old school of procedural programming from before the internet and the whole DOM box model kills me. It's not my worst struggle but it is at times but thanks to you I have solved many problems. I used to pay but I'm on SS now and only do this to keep me sane. LOL! I just read what I wrote.

Oh my god you cant believe how much this video helps me! Even if i learn from every of your videos, this one solves so many issues i had. I had them because flexbox was the first thing i learned, or at least it was what is used every single time since i started with CSS.

I had the same problem with padding three days ago. I thought I was doing something wrong and then I came across this video. Thank you Kevin!

Hello Kevin, I'm Brazilian and every things has more simple, when I watch your videos. All your content it's amazing, please never stop to do your videos because I need them. I'm learning english during at this time and I expect learn much more with you about Web Development.

Man, how do you master all this? I mean not only do you clearly understand this and know what you're doing, you're able to explain things in a manner that's easy to understand and digest! I loved (and finally finished) your responsive layouts course and I need to take ALL of your courses. lol Thanks for posting!!!!

@marcosfavarao938

6 ай бұрын

man, How can i get this course? Where can i watch? Do you have a link?

@TheCocoaDaddy

6 ай бұрын

@@marcosfavarao938 Do a web search on "Kevin Powell responsive design course" and you'll find a link to the "Conquering Responsive layouts", i think it's called, course. It's absolutely EXCELLENT and HIGHLY recommended!

You have a gift :) I wish I could explain things as clearly as you do. I tend to over-explain. You are always concise and on point.

thanks for all your great content!

Thank you very much! Very clear and interesting to watch!

Thank you, always! Another great content and I love your new haircut! 😊❤

Great video Kevin. Thanks!

I'm a big fan of CSS grid. Thank you for the tips Kelvin.

Very informative and helpful, thanks Kevin! :)

Meanwhile CSS frameworks be like: Let's build our entire grid system with flexbox

@riddixdan5572

Жыл бұрын

that's the reason why I use frameworks only for components and not for layouts.

@Dead_Goat

5 ай бұрын

thats because they know grids are cancer and you should never use grids.

Thank you for these great tips.

Another epic CSS video 🔥👍💙

Very useful. Thanks for the info

Great video, thanks!

i am never see your tutorials. But now i see, you amazing teacher. Thank for the awesome tutorials

Awesome video as always sir

As a beginner, I want to say thanks for your great content. I always used flex ox over the grid and it's time to be comfortable with both 😊

I'm not a professional coder or anything. Just doing it for fun, but also for a long time. And coming from doing layouts with table, everything else is pure magic 😅 Also, great content thank you so much! You have a very great style of teaching.

Cool stuff. Thanks!

am learning a lot form ur videos thanks for the effort

Reading comments in front end videos is so relaxing compared to comments on technical videos. I might not be a fan of front end but everything is so clean and happy.

As someone just getting into this I find grid and subgrid to make more sense to me for a lot of layouts. Though I hear using both is the best way.

@KevinPowell

Жыл бұрын

Yeah, flexbox 100% has it's uses! But I use grid for a lot of stuff these days

@BurritoBrooks

Жыл бұрын

@@KevinPowell Nice! I’m on the right track then.

Thx, Kevin!

Thank you.

I used this for a project today......Thank you very much

Responsive equal grid in 2 lines of CSS (no media queries): { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } The min() inside the minmax() is the key component here, so when the screen size drops below the px value, the columns will be 100% of the container, otherwise they'd just overflow when they reached the threshold. Can obviously use a gap too and change auto-fit to auto-fill depending on use case, but I use this all the time on projects and saves a lot of time!

I avoid media queries for the most part by utilizing flex-basis for the children. This tends to handle most responsive scenarios, but you can still run into issues with width when using flex-grow if your goal was for all of the children to stay the same width. In those instances (where I want a true grid/table) I use grid layout and a custom reusable set of classes that access common width and gap variables. IE "gridRow--small", "gridRow--largest gap--large", "gridRow--medium gap--smallest". Its an easy way of saying "I have a list of things that look best around (X) size... just display them and let them wrap if they need to". I can also nest them, tell them to fill available real estate, dont fill available real estate, etc etc. It seems to work for 98% of all my needs for a few years now.

@androidetube

Жыл бұрын

hi could you post some actual css code on what you are saying, It seems very interesting but I can't get it by reading your comment, thanks

As someone who learnt flexbox first and found it way easier than grid, I use flexbox for everything (or don't know how to use grid). For this situation, I just throw max-width for each column and everything works fine.

@KevinPowell

Жыл бұрын

That can help, but it won't fix the issue here unless you put in a fixed size, like say "30%" in this case, but I wouldn't want to do that here because I can use this for 1, 2, 3, 5, 10(!) columns with a single class.

@chotai

Жыл бұрын

@@KevinPowell that's why I wanna learn the grid. I just want grid to be as handy as flex is for me. xD BTW everything I know about the CSS, mostly is because of your channel!!

@mparth35

Жыл бұрын

@@KevinPowell exactly that's the only problem but the kind of work that I do. It's mostly creating landing pages and the final design always remains the same. So an exact value for max-width works out well. But as @sharanam chotai mentioned, I want to learn grid for the same reason as well. But coming out of my shell is not as easy as I thought🥲

@AntiAtheismIsUnstoppable

Жыл бұрын

@@mparth35 If you create landing pages in your job, then spend a little of your spare time on something completely different, for example, a blog post design. Never stay stagnant and static, especially when you're younger you need to develop your skills constantly.

@Frostbytedigital

Жыл бұрын

​@@AntiAtheismIsUnstoppable agreed. I'm not even remotely experienced in web development, react and others are still foreign to me. Bit understanding flex vs grid and using them separately, along with understanding position types are some of the most important.

awesome very helpful.

I love you Kevin

My mantra is “Grid for laying out containers, flex for laying out content.”

Hey Kevin, thanks for all of the videos you continue to put out. They've been a huge help on my front-end journey! Two questions for ya (or anyone else that may know) if you don't mind! 1. Which video/short was it where you discussed giving a background image full bleed inside of a div/element? 2. What method would be best to contact you with inquiries about front-end/css in general? (Kind of a question that potentially leads to more questions here haha 🤔😅) Thank you so much man! Youre an inspiration and a great teacher, already looking forward to your next videos!! 🧑🏼‍💻🤝🏻

@KevinPowell

Жыл бұрын

For #1 - kzread.info/dash/bejne/f62rx9yCqM_WaLw.html For #2 - my discord is best (link in video's description), though it's more of a good place to ask questions, not really ask me directly (though I am pretty active in there).

Yes, when i used display flex it easy to me to centrer, justify, algin, but now i am using bootstrap it very ez and pushed u to be real pro and simple.

Grid has defined number of cells in one row, it can be important when you want to add columns from code, like buttons or other elements which should be in one line.

A timely drop indeed. I am currently designing a cards design for a website.

Nice. I barely use grid and just flexbox everybody and their mother. However, it seems there's definitely benefits to using grid in certain situations. Thanks.

Thank you for your videos. I always enjoy them and have learned a lot. I've seen you do this before. Why didn't you suggest something like this for responsive grids? It works really well. .responsivegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-gap: 1rem } the grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); makes the grid responsive and wrap. auto-fit also works, but it expands the last row to fill the width which I never liked. It's a much better solution than flex for this situation.

First think: "What is support of grid?", but after small investigation on "caniuse" I realize that in this case grid is OP. Thx for trick and good practice)

IMHO the concept of grid works better for me. You see what's defined in grid-columns. But that's just me and my apps that have a strict fixed column based layout and will ONLY work on a large screen by design. In a more abstract way: grid is more declarative / imperative than flex. I do admit I'm a control freak ;-)

The good and bad of CSS is all that. It surprises you every project, also on re-design, and you'll never stop learning new tricks to get around situations. 🤯

Good work Kevin. This probably is a design "flaw" by `flex`, maybe they didn't think of enforcing the size at the first place. It could be a feature as well. Anyway, practically I felt `grid` is useful for un-structured content and `flex` is more for the structured one, relatively speaking.

I literally hate CSS, so im glad I found you

I've always hated CSS. Your channel helps a lot. Thank you.

@lawrencedoliveiro9104

Жыл бұрын

As someone who was doing HTML back in the days before CSS, I must say I don’t miss all that old random collection of attributes one bit.

0:32 why I stopped using flex and am just going to use absolute and calculate things myself (even if it's going to be marginally slower). I added a large image, which I wanted to basically just take up the remaining space, and it ended up pushing the cell wider than its set size...

Kevin, nice video as always! But I want to ask you, is there any way to center items in grid which moves to next row? For example I have 4 items of the same size, and then there are not enough space for all of them, one will move to the next line and centering? If I do repeat auto fill etc it works by columns, but I want next line to be whole width and centering items:) hope you understand me, have a nice day!

@KevinPowell

Жыл бұрын

No, not how grid works. For that you do need flexbox, and it would just mean you would have the parent flex container, then inside that your columns, and then *inside* the columns you can place the content, and you'll avoid this issue

If all children should have the same size, grid is usually the best option.

This video got me thinking..... Kevin, I was wondering if you can make a video to explain WHEN it's better to use Flexbox and WHEN it's better to use Grid.

The haircut 👌

grid: auto / auto-flow 1fr; is definitely one of my most used css rules.

very timely video. I was working on a frontend mentor challenge and I ran into this exact issue with columns being misaligned. I've been using flex almost exclusively since I've started and I'm gonna have to get more familiar with grid. I found a good little gamified learning site for grid that covers the basics. It's called "Grid Garden" if anyone's interested.

@Bansh33

Жыл бұрын

when i was learning CSS my teacher gave us the links to grid garden and flexbox froggy and every single one of us thought how amazing and how easy it was to learn with this games

@dugannash9109

Жыл бұрын

@@Bansh33 It's awesome how many people put in the effort in order to teach others! The visual nature of the gamified stuff really helps (as opposed to just reading docs). The flexbox game I started with was called flexbox zombies (lol), another good one.

@Bansh33

Жыл бұрын

@@dugannash9109 I agree! have to check that one, thank you

it's obvious that combination of flexbox and grid is very powerful

At least I can spend time mastering grid without worries now.

Look into TaikwindCSS. It's really intuitive for grid and flex box layouts. You honestly need to use both appropriately together or neither work as well as they should. TaikwindCSS bridges that gap unlike any other css tool I've ever used.

Flexbox is the better solution for me when I do a 5 columns layout (for showing features or values, imagine an icon centered on top of each children) and want it to wrap but be centered. So context can also dictate the best approach sometimes. But thanks for another great content!

widh: calc(100% - 60px) & space between 😁

I find flex better at semantics, readability, and utility. Ex. bootstrap's container -> row -> col

Have you maybe considered migrating your intro logo bumper (0:35) to a dark theme? When I watch your videos (usu. before sleep) this flash of white background hurts my eyes :) ty!

Opinions on the "grid for layout, flex for components" guideline?

I see you from a mountain in colombia, i give thanks to Gosh for the connection that allows me to see you. I have a question.... How font size responsive, % em rem which one use? Should i use tag or use the images as background with css?... I wanna build something but not just copy the work others but understand what i a doing!! Thanks i dont know if i wrote in good way. But thanks for your attention. Peace

can grid create layout like this on list article? --- --- --- --- ---

Sir to avoid height for background image how to give height without using height using flexbox or grid plz reply😊

Is flexbox is better for SEO and speed or grid is better for SEO and page load ?

What about just... setting a fixed width on the columns? flex-grow: 1; width: 300px; (where it'll wrap)

You should just add "cta" class in first div wrapper UNDER column div. Column div should never be messed with. :) Friendly advice-

@KevinPowell

Жыл бұрын

That would solve the issue, and works fine, but when I don't have to bother with "columns" and then content inside the columns, and just plug content into the grid, I find it so much easier and cleaner.

Honestly, as I discovered grid I've totally abandoned flex for every layout, even in single row. Grid is pretty straight forward and simple, expecially for column dimensions and positioning. The only thing I find useful about flex is to center a single element vertically and horizontally, for everything else grid is the best.

I wonder if box-sizing does affect flex.

@KevinPowell

Жыл бұрын

Not for what I looked at here

also to add grid gap works on older browsers than flex

Most of the time I use grid, but sometimes, when I want the last row of the items to be horizontally centered when the total items of the last row is less than the number of grid columns, I don't think grid can do that since it's a 2 dimentional layout, but flexbox can do.

@KevinPowell

Жыл бұрын

Yup, good use case for flex there :)

@blejac948

Жыл бұрын

Wait how do you do that? You mean like for example having 3 divs, you place 2 divs in a 1 row and last one you center in the middle of the second row to look better? How would you do it with flex?

@kapa4208

Жыл бұрын

@@blejac948 There is no trick, it's the default behavior of flexbox. Just add these props to the parent: "display: flex; align-items: center; justify-content: center; column-gap: 1rem; row-gap: 1rem".

@blejac948

Жыл бұрын

@@kapa4208 Yeah I think we are not understanding each other. If you set it up like that you are just going to have 3 divs in 1 row. What I was talking about, and got from your first comment is 2 divs in 1 row, 1 div in a second row, horizontally centered.

@kapa4208

Жыл бұрын

@@blejac948 If all items fit in 1 row, why bother to separate them into a new row. What I meant, if you have 7 cards, and for example in desktop viewport it can contain 5 cards (higher than that then the cards will be shrinked too much), then flexbox will put the remaining cards into a new row (btw i forgot that you also have to specify this prop to the parent element "flex-wrap: wrap"). And then it's just the matter of how you specify the width of the children (those 7 cards), whether you are using flex-basis property, or width property, either using percentage value or fixed value.

hey uh, whats that font you are using??

I prefer to just set a width on the flex items, personally. Really never cared for grid. Probably because I started trying to use it back when IE still mattered and went absolutely insane trying to make it work over there. Now I only use Grid to hack stuff into overlapping other stuff while still having flow lol.

It's a very interesting video (as always), but I have a question(as always). Why can't we just give "box-sizing: border-box" to the all child-elements?

@KevinPowell

Жыл бұрын

Because flexbox isn't looking at the box-size, it's looking at the content size. I had that rule in my CSS and should have shown it in the video to show that it doesn't have any effect.

@chotai

Жыл бұрын

@@KevinPowell so are you going to put that update in upcoming video or anything else ..?

@davidvoskanyan5783

Жыл бұрын

@@KevinPowell yeah, after asking, I had a free minute to check it on my own, but anyway thank you (both for answer and for content you create)

I prefer grid but i think there is Cross browser problem with it. Do you have any solution for that issue?

@lawrencedoliveiro9104

Жыл бұрын

I look at the browser-support matrix on MDN for the “display: grid” option, and I don’t see any obvious red marks. Which ones cause trouble?

Would box-sizing: border-box; not fix this?

@KevinPowell

Жыл бұрын

Nope. I should have mentioned it in the video, but I had that already. Flexbox, isn't looking at the box-size, but only the content-size no matter what you do.

nice mohawk 😅😁

display: flex justify-content: space-evenly

i like grid, but i have two problems with it: 1. how center elements easily like in flexbox, 2. why in firefox fr unit is sometimes weird

@davien001

Жыл бұрын

Place-items: center;

@hahabanero

Жыл бұрын

@@davien001 nope i meant center columns - for example in 3 column grid i want last row to center if there's less than 3 columns used - you can't do that in grid - if this will be possible flexbox will be out.

@davien001

Жыл бұрын

@@hahabanero align-self: center; justify-self: center; On Child element;

How to make equal width columns if one of the children has a border?

@KevinPowell

Жыл бұрын

Grid will work there too :D

@maksz4656

Жыл бұрын

@@KevinPowell Ok, columns are equal indeed, but what about equal rows? Unlike the width, the height doesn't want to shrink and the whole next row is pushed down.

Why u don't use display: grid; grid-template-colums: repeat(auto-fit,minmax(min(100%,200),1fr)) ?

I’m using width:33.3%; and float:left;

I ran into issues with flexbox on mobile but that never happens with grid. Imma grid lover now.

People use flexbox over grid because most browsers support it ☺️

always swapping flex and grid..quite often find I can use the other instead. and as for unreasonable padding IRL ugh 😑 I swear this current design has like 20em padding on everything

Grid is awesome indeed. I've been using it since 2018 and never looked back. I use flexbox once or twice a year at most, when I need to display a random list of wrapping elements with random column sizes.

This is okay in theory😊some IOS devices doesn’t support grid,aldo the documentation says differently. For now I think that flex is still better

@18.j

Жыл бұрын

My man internet explorer support grid tf you are talking about iphone 3g browser?

@markons9391

Жыл бұрын

@@18.j I'm just saying facts. I'm working as a developer and I need to check on many devices

@lawrencedoliveiro9104

Жыл бұрын

Apple’s browser is crap. Is it really worth the headaches to pander to them?

@lawrencedoliveiro9104

Жыл бұрын

@Ghots But the USA only accounts for something like 20% of the world market.

Are you using Firefox Kevin?

@JonathanPyper

Жыл бұрын

Sorry i see that you are :)

Why not just use relative position and absolute position?

Seems like you already talked about it in some other video?

@KevinPowell

Жыл бұрын

Sure have, but I think it's the first time I focus specifically on this :)

@chotai

Жыл бұрын

@@KevinPowell oh, I must need to watch your videos again... Probably, I missed that part somehow

Kevin we need a better explination to why this is actually happening ... I am occasionally running into this issue when I have a navbar of three 1frs

justify-content: between?

666k subs

I think flexbox inheritance is really weird

I use flexbox over grid....😎

They are both supposed to used together :)