Avoid making this mistake in your CSS

Подписаться 917 тыс.

Просмотров 245 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

4 окт 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 164

@theriser8751 Год назад

"Cum." - Ipsum, Lorem

@IzRizen Год назад

That's all I seen

@illyaassowunmi6183 Год назад

I was looking for who else would notice 😑

@SEGACD32XMODEL1 Год назад

When

@fbsouza Год назад

LOL

@luay_kelani Год назад

I saw only this

@jimfilbert1928 Год назад

When Lorem Ipsum sometimes is a little awkward.

@thedeveloper9896 Год назад

that one word starting with c 😂💀

@alejandro1242 Год назад

And Porro is joint in Spanish :D

@lucaslindgren3237 Год назад

@@thedeveloper9896 No? It ends with m

@-gab Год назад

@@alejandro1242 and "porra" would be "cum" again in portuguese 😳

@ikntc514 Год назад

@@-gab ou gozo ne cara😳

@baohuynh744 Год назад

Concise video content that does not inundate viewers, with an awesome background video that demonstrates perfectly what you are saying. You’re the best Kevin

@-Cocell Месяц назад

> "Cum." - Lorem Ipsum ✨🗿

@pupinarvaja Год назад

not gonna lie. I use flexbox just bc I never took the time to truly learn grid. Gonna study more

@n-0-1 Год назад

Just so you know, grid does everything that flex does and more. Learn it because it will save you code and time.

@ClickbaiterZ Год назад

It's easier to layout in grid.

@mikehenry01 Месяц назад

I'm in the opposite situation. I learned grid first and I don't fully understand how flexbox works, so I tend to avoid it and use grit instead.

@Hugmeman1 Год назад

That's actually the most helpful explanation Ive ever heard. I understand it now! Thanks, Kevin!

@maerosss Год назад

Me after watching: "Yeah, you're right, I shouldn't always use flexbox" *continues to use flexbox for everything :-)

@n-0-1 Год назад

Grid does everything that flexbox does and more. You should stop using flexbox entirely.

@maerosss Год назад

@@n-0-1 I also pour my milk first and cereal afterwards

@thecoolnewsguy Год назад

@@n-0-1 this is so wrong. You shouldn't stop using flexbox. Also FYI, flexbox has a great support in older browsers unlike Grid

@n-0-1 Год назад

@@thecoolnewsguy I've never found any browsers that don't support grid, you realize they keep supporting old technology because of people like you who keep using it?

@thecoolnewsguy Год назад

@@n-0-1 ok

@sidewaysdesign Год назад

This helps explain the ‘flex‘ in flexbox,

@francescovetere Год назад

I absolutely love grid, but one thing I think flexbox is really superior at is easily get your items reversed over the main axis ("flex-direction: row-reverse/column-reverse"). Of course you can do the same with grid, throwing a bunch of "order" on your grid items, but flexbox is just much more concise here :) As always, thanks for your great content Kevin, you are my inspiration to keep going and doing what I love!

@degenyakuza Год назад

you can name grid areas too

@agafonovas Год назад

Wow. That grid-template is niiccccee😯

@cobyambrose2915 Год назад

I'd love a tutorial on that snippet with the minmax

@leonardoraele Год назад

You actually just convinced me to go learn grid layout. I've been using only flexbox for evething at this point.

@stanmuller2870 Год назад

Best concise explanation on how to know when to use each. 👍🏼

@bobdinitto Год назад

I've found both flex and grid very useful. Neither is best and they can work together quite effectively.

@toshitsingh7270 Год назад

Few months back I was also doing the same mistake. I was soo comfortable with flex box that I didn't wanted to learn grid and I was avoiding it. But with using right layout in right place, makes life much better.

@mezza001 Год назад

Kevin, from the bottom of my heart, thank you. You made CSS learning fun and tolerable for me sir.

@RealCaptainAwesome Год назад

Thanks. I am comfortable with flex but am remaking an old project and I think grid will help me.

@acidhauss7018 Год назад

Good analogy (i.e. rough layout, flexbox, exact, grid). However I do understand the hesitation to use grid, it is always a pain to have to dig out old code and remember the way to do 'something', whereas with flexbox all you need is the chrome devtools

@balubalaji9956 Год назад

wow , more structured layout vs intrinsic layout. nice way of explaining

@rehkmansa 9 месяцев назад

Yeah I needed this I had become so hooked on grid

@Pixels_and_Points Год назад

I've never seen this explained so well.

@bentaaritnidhal5778 Год назад

Wow man, rlly thank you, i spend more then week and i didn't get the same results as you do with one line of code.

@sc76399 9 месяцев назад

Need to look into grid layouts

@alanouri9965 Год назад

Thanks for the information

@nguyetluu2060 Год назад

this so useful, love it

@MedGfxDon Год назад

what I see from many youtubers and course creators is taking a general rule of shaping the layout ( header, main, sections and footer ) using grid, and then playing with the position of the childrens inside any box using flexbox, like framing the header using grid but positioning the nav area using flexbox which makes a bit of a sense and makes a good colab between the two

@pointer333 Год назад

This is what I needed!

@fancybaguette Год назад

What is that sorcery in the grid-template-columns

@KevinPowell Год назад

Looks a little complex, but works super well!

@user-gm3lg8gp3m Год назад

Thanks this is helpful

@pointzero9 Год назад

Kevil flexing his grod skills 😂

@senorverano 7 месяцев назад

You are so awesome!!

@semicolon6499 Год назад

Kevin The Goat Of css 🗿

@MrBrax Год назад

I have still to find much use for grid

@bilatungdulang9708 Год назад

Really helpfull trick i have ever seen

@edrayel Год назад

Very nice!

@Edwardtonnn 7 месяцев назад

Awesome 👍🏼

@VasilyPavlik Год назад

Am I only one who pause the video and retype Kevin's texts in VSCode and try it in parallel?

@KevinPowell Год назад

I hope not! Such a better way to learn than just mindlessly watching!

@iranRevolution7 11 месяцев назад

both are great

@codedjango Год назад

Can you please make 1 series where you show how to use grid and flex with bootstrap 5?

@KevinPowell Год назад

I haven't touched Bootstrap in years now... but I think understanding them *without* Bootstrap is probably the best way to figure out how to use their system for using it. I have heard that their grid is a little awkward though.

@codedjango Год назад

Sure....thank you so much for all your tutorials....it helps me so much :)

@gerrcassytb Год назад

thanks for the vid.

@romansamon9215 Год назад

Flex: 1 1 auto - same as grid :)

@lethienngan 9 месяцев назад

Flex for small things and grid for the layout

@mattshnoop Год назад

The other thing I see is people instantly going for Flexbox or Grid when literally just stacking some display: block elements does the trick just fine.

@mattburgess5697 8 месяцев назад

I find Grid is good for overall structure, while flex is good for smaller elements together.

@biancagalla8303 Год назад

Kevin ist the Taylor Swift of CSS. There is always something in a video that’s a hint to something else 😂 I‘ve learned so much of the videos that wasn’t even the topic 😅

@ezikhoyo Год назад

But it’s, if you think about it, quite obvious. *Flex*box for something that’s flexible, e.a. tags with different or even at time of writing the css unknown length. And a grid for something where you want it to be structured as a, who could’ve guessed it, a fixed grid, no matter the content/length/size of child elements.

@ShaharHarshuv Год назад

I always diffault to flex unless I need a grid

@razeft 8 месяцев назад

Grid for layout Flex for component

@isaacqadri Год назад

ah, now i know why some masonry layout libs use Flexbox instead of gird.

@philemonokpokpa503 Год назад

How do I save or download this video so I can watch all over again several times? KP is a CSS god!

@CosmicZombeh Год назад

RU-vid to mp4 websites

@robertgregg7028 Год назад

That issue that appears just after the half way point where the grid items flow outside of the containing element. How is that best handled?

@thisisvj3158 Год назад

🔥

@judyodiakose6838 11 месяцев назад

what do you think about the picture element and figure element for displaying images on a web page

@shayokhshorfuddin2576 Год назад

6th box lol

@Radhakrishna95689 Месяц назад

Can we center last item

@tyrellwreleck4226 Год назад

I use both. They are very useful in different scenarios. People who likes to debate between these two have no friends to talk to.

@user-th2cp8uh8r Год назад

I don't know if I'm going the correct way but flexbox, grid, and box model were the only things that I tried to learn during CSS and suddenly went to Javascript. and everytime I encounter a CSS problem, I just say to myself "Let's see what kind of flexbox problem is this". LMAO

@belalelhagrasy7020 Год назад

Mr .. don't stop making videos !!

@_jovian 11 месяцев назад

when you work for the hub but have a css channel

@alsayedali5412 8 месяцев назад

Wooow

@ayylmao.mp3 Год назад

*puts flexbox inside grid*

@youjustlostthegame2028 Год назад

And then you have the people who use neither and throw together whatever works in the moment

@dannieh9849 Год назад

What's the mistake I should avoid? To use the wrong tool for the job? Very unclear title to me.

@Darckfire43 Год назад

I mean using the wrong tool is a mistake so why is it unclear;

@user-cs3ym8ex5l Год назад

The mistake is to always use the tool you're used to because it seems more comfortable

@FROZeN_FoCUS Год назад

It's literally the first thing he says in the video

@dannieh9849 Год назад

@@FROZeN_FoCUS I must say that after having rewatched this that I must have missed slept halfway through it. Especially the first sentence he says! My bad.

@atwarwithlife Год назад

choosing the wrong layout tool. he literally says it at the start of the video

@GR_BackingTracks Год назад

Will you do my homework for me? This form is driving me batty...

@zeffali 9 месяцев назад

Column count left the chat

@anthropomorphicOrange 7 месяцев назад

Flexbox is the answer, until it’s not. At that point, use grid.

@LeFede Год назад

cum & porro jaasdjkasjka

@AFTstorm Год назад

I almost never use grid for this reason

@uuu12343 Месяц назад

I still till this day, not understand how people visualize and create proper frontend so easily

@mikehenry01 Месяц назад

What is a 1D layout?

@sanjeevrai5954 22 дня назад

I guess it's just one row or one column... But when you've multiple rows or columns it's 2D

@Azikkii 4 месяца назад

Meh I disagree. You can get the same layout from either one. It depends on what you’re more comfortable using. It seems like you’re trying to put the two layout structures against each other but they can do the same thing and it depends on what the person is better with. In my professional experience I don’t ever see grid being used. As a developer assigned to a huge code base you can’t just implement a grid system on whatever you’re working on because then the whole code base is out of whack. But you can use flex box to fix things and not ruin the integrity of your layouts.

@baelhadjhadjaissa999 9 месяцев назад

IT'S FOOTBALL

@danielgonzalez2582 Год назад

now i need a porro

@weebbuddy7035 Год назад

why da 6th box say that eh?

@soycuzz6125 Месяц назад

but grid doesn't work in safari!

@SamuelHauptmannvanDam Год назад

Can't get your min(100%, 150px) to work. says: "message": "Incompatible units: 'px' and '%'.", "formatted": "Internal Error: Incompatible units: 'px' and '%'. "

@SamuelHauptmannvanDam Год назад

It turns out: At least to my eyes, theres no difference between: grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); And grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));

@allsunday1485 Год назад

porro

@vonpyra Год назад

Soccer 😭

@kartikjoshi1642 Год назад

whats the sixths box doin

@DanielHaug Год назад

I definitely want the children to get involved, but I don't have any.

@CryOfTheLyrebird Год назад

No avoiding that word on the internet, anyway

@tsyf1 Год назад

You're not the king of css for nothing. As always, great video.

@zcoder8940 Год назад

Please kevin, please,🙏🙏 could you post the source code (html and css) that you use in your videos? either in a link or in the video itself? Your followers need it (or at least me), to test with that code, make variants and learn much more, but from a correct base. We ask you Mr. kevin, please.... 🙏🙏🙏

Месяц назад

Porro 🍁

@sidbot9622 Год назад

Meanwhile me using float

@tntg5 27 дней назад

It's football please

@adtc Год назад

So, Western parents vs Asian parents.

@FrameMuse Год назад

So flex is flexible, grid is a grid

@sterin557 9 месяцев назад

Use flex 95% times

@jonmayer Год назад

Don't tell me how to screw up my CSS. I'm plenty good at doing that myself. 😁

@Blu3wonder Год назад

Gonna have to disagree with you on this one chief.

@antoniog.g256 Год назад

Cum , Porro 😂

@n-0-1 Год назад

Wrong. Grid does everything that flex does and more but flex cannot do everything that grid can. Grid replaced flex so stop using old technology.

@markrobershorts Год назад

Lol why didn’t you upload this as a short

@timgreller Год назад

Cause it's short

@patahgaming 9 месяцев назад

Cum

@soprano6806 Год назад

vertical videos make me go bruuuuuh

@be2wa Год назад

Depending on what bruuuuuh means, I might possibly totally agree with you. And if I do, I'd suggest an extension to chrome which at least displays them horizontally with the controls -> RU-vid-shorts block