Two simple layouts that work better with Grid

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

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

50% 1

🔥Get your Simple Grid Layout Cheatsheet here: simple-grid-layout.kevinpowel...
A lot of people use flexbox because it’s simpler than grid, or at least that’s what they tell me. From my experience, there are a lot of simple layouts that are easier with grid, and I look at two of them in this video, and just to prove my point, I compare them to the flexbox equivalent.
🔗 Links
✅ Get the Simple Grid Layout Cheatsheet: simple-grid-layout.kevinpowel...
✅ I love flexbox too, and here is how I decide which to use: • Flexbox or grid - How ...
✅ Other simple CSS Grid layouts: • Simplify your CSS with...
⌚ Timestamps
00:00 - Introduction
00:48 - Why people love flexbox
01:47 - Custom properties with grid are amazing
04:20 - Flexbox’s flexibility makes this type of behavior harder
07:15 - When flexbox doesn’t work as easily as you’d expected it to
08:28 - Making grid more flexible with auto-fit
11:20 - Trying to replicate the auto-fit behavior with flexbox
#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 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!

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

31 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@Loug522 Год назад

Thank you for existing! I never had so much fun studying until I found your channel and decided to move on from learning Python to CSS(and a bit of Vue as well), which I used to have a really hard time learning.

@luketurner314 Год назад

"Use the right tool for the job." The hard part is determining what/which tool is the right tool. These videos help with that

@deatho0ne587 Год назад

@ 14:00 flex-basis: calc(33.3% - 1rem) // might be missing a 2x 1rem there Then set-up 33.3% as custom property and 1rem as a custom property

@manosmenexis3160 Год назад

Awesome video once again. A little thing that I always forget and it trips me up from time to time, is that when using minmax() it is a good idea to use min() for the ideal size as it will cause overflow if the screen size is less that the ideal size. So I would just use something like this. grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));

@bsully75 Год назад

Thanks for the info on grid and flex. I've slowly fallen in love with grid because it's so easy to configure the columns from the parent. It's especially powerful when using container queries! Also, calc does work very well for calculating the flex-basis in a flex layout. Especially when you use custom props for the flex-basis and gap. .card { flex: 1 1 calc(var(--basis, 33.3%) - var(--gap, 1rem)); }

@missingsemi Год назад

2:40 reminds me of how exciting attr will be once it's new use cases are fully supported. In the future instead of making a selector for each potential column could, you could do something like --column-count: attr(data-columns integer, 3) which would take your data attribute and use it as an int with a fallback of 3.

@KevinPowell Год назад

Yeah, right now attr() is one of those niche things that can be pretty cool in the right situation... if it ever does what it's supposed to be able to do in the spec, it's going to be *incredible*.

@goodshiro10 Год назад

more than incredible I'd say

@MrKOHKyPEHT Год назад

Most common requirement for cards: aligned content

@CyberTechBits 18 дней назад

Fantastic tutorial and demo!

@VarunPats Год назад

Thanks, amazing as always! 😍

@kunal007216 Год назад

Thanks a lot Kevin. This really makes a lot sense in just 2 lines of code.

@GR_BackingTracks Год назад

The grid/flex shootout continues... Thanks, Kevin! Nearly a year into this, I'm learning as much from you as I am from my formal classes.

@paulhildmann8392 Год назад

Thanks for making grid a little more understandable. The "auto-fit" looks like a winner for me! Thanks for the cheatsheet. 🙂

@herbowenby4357 Год назад

Thank you so much for sharing your knowledge. Always appreciate your content!

@crixcus Год назад

thanks as someone just starting to learn web dev this is so helpful responsive design is something im not comfy with dealing with atm and this helps!

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

You are, by far, the best teacher around!

@hamoodhabibi7026 Год назад

Thank you! This clarified all my questions for grid vs flex and when i want to use one over the over.

@sorasitsuprapoch5921 Год назад

thanks, its been very helpful

@lukas.webdev Год назад

Awesome video! Thanks for sharing. 😉🔥

@WendelleAlimbubuyogOyeah Год назад

Thank you very much for your videos. I've been using flexbox in every use case, but now I am more inclined to use grid because of your videos! Now, I regularly watch at least one of your videos every day before I start my day.

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

awesome! thank you sir.

@eyyikzthecounter9929 Год назад

Sir you're succesfully bring my interest in using grid again, thank you! This unlock a whole new potential and maybe made my workflow much faster

@rem2764 Год назад

useful comparison, thanks

@Salmancreationbd Год назад

Masterpiece, Thanks a lot Many Issues fixed. Loved

@Jingho Год назад

I was literally learning about grids and flex box in Codecademy today, this video has really helped me understand it even more. Thank you

@prodbybarn Год назад

Thanks you for your awesome videos

@hassaneljebyly2868 Год назад

Thank you.

@aleksandr95 Год назад

Thx for video!

@Alex.Shalda Год назад

wonderful content!

@RyanRampersad Год назад

I've been using the auto-fit minmax trick for a while now after having seen it in one of your videos a few months ago. I usually use flex as my layout tool, but grid is very useful in situations too.

@radadadadee Год назад

I always feel a bias towards grid tho, not sure why lol. Kevin makes an excellent job to cover it ngl, which is good.

@neoweiter Год назад

you are the best of all

@securefolder4548 Год назад

My mentor ❤. Thanks to you I'm having a easy time in college.

@clevermissfox 6 месяцев назад

All hail Auto-Fit!!!! And minmax is pretty great too. ❤

@laxlyfters8695 Год назад

The css king 👑 I know you have mentioned in other videos you do not like the name but like yo this video is amazing and you show the pros and cons of what you teach

@jasontravers6955 Год назад

I like this alot for how it can interact with JavaScript as well. Using JS to modify the data-columns property of the container element based on length of children array. Useful for when the content changes dynamically based on user interaction like "adding" or "removing" items from the DOM

@Killyspudful Год назад

Once Firefox hurries up and implements it, you could use the new :has selector to automatically adjust that 'length-of-child' value via CSS, rather than in JS...

@kaneel36 Год назад

variables in css3. impressive!

@MrSurfsAlot Год назад

Super relevant for me rn making an ai news website and was having some problems with styling the home page

@r-i-ch Год назад

This is great stuff (as always!), thank you so much. Thought for the future if you do give away more CSS cheatsheets - maybe include a simple box-graphic\diagram example next to the code to make it easier to visualize what you mean?

@potrosanjuan Год назад

Thanks a lot, I've already used to grid autofit, but I have to admit that last flex behaviour can be really useful sometimes. And as always, missing the two thumbs up button!!!!!

@johny962 10 месяцев назад

amazing

@klirmio21 Год назад

Honestly? If I need some new good things and tips and tricks and cutting-edge information about CSS specifically - I always go to Kevin.

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

Awesome

@nicolaslarrode9273 Год назад

Hi Kevin ! Amazing content as usual, you didn't use grid-auto-flow: column; ? Ih there a good reason ? (i'm french, sorry if i wrote mistakes).

@enzoaltamirano21 6 месяцев назад

Hey Kevin, awesome video as always. I've seen a lot of your flexbox vs grid videos cause i was really struggling understanding the nature of both. Maybe i've missed it but i haven't really seen you use the combination of repeat(auto-fit, minmax(min-content, 1fr) with grid. Would this behavior be extremely similar to flex in the sense of having all columns be as small as possible to fit infinite number of columns(before overflow), but then be as big as possible just as with flex?

@dhanbirsunwar6374 Год назад

Awesome! How do I make the last child justify-center using the grid?

@serychristianrenaud Год назад

thank

@fai6702 Год назад

this is pretty nice with media queries and usually i use flex when there is flexibale flow in childs tbh

@LokiDaFerret Год назад

What you're saying is use the correct tool for the job. Use a hammer when you need a hammer and use a mallet when you need a mallet. The key is in understanding which tool best fits the job.

@TheMetalMag Год назад

the grid man :)

@KelseyThornton Год назад

I always found grid much easier to get my head around than flexbox 😂

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

Is position sticky intended to work on CSS grid children? Is it possible to replicate the Excel behavior of freezing the rows and and column headers?

@steveportas7961 Год назад

Not sure if this has been mentioned but in your simple-grid-layout (apprecate that!) did you mean "grid-template-rows: auto 1fr auto;" over "grid-template-rows: rows 1fr rows;" for pushing the footer to the bottom of the page?

@judyodiakose6838 Год назад

I think flex is a bit better because 8n some cases we don't get to use row or column reverse in grid ... I had a situation working with grid when I needed to put the image before the content in mobile... It was hell, I had to change the entire css to use flex box so I can get the reverse function I needed

@clevermissfox 6 месяцев назад

You can reorder the children in grid too just like in flex. There isn’t a row-reverse/col-reverse but you can use the order: x; property on the child to move them around. Great for writing semantic html then reordering visually.

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

@@clevermissfox Thanks

@eronorbi Год назад

hi Kevin! Could you please create a video about FORMS and how to nicely style them?

@KevinPowell Год назад

I've sort of touched on them at times, but yeah, a dedicated video on them would probably be a good idea

@usmanqayyum340 Год назад

Sir! . . . . . How to you learn css? Eeither books or videos.

@rem2764 Год назад

in the version with flex, can go well with container queries

@KevinPowell Год назад

100% yes!

@anthonyokonkwo3493 Год назад

My CSS doesn't work well what should I do? It doesn't display in the live server.

@almannazyrov394 Год назад

Kevin, I have a question for you as CSS Expert Developer. I am using rem units (62.5%, 10px = 1rem) in every project in order to decrease that root percentage until 50% and, potentially, make the project more responsive, than doing everything in px, changing every element of the page by hand. Is it a good practice and decision to make it for complex web applications (using rems, 10px = 1rem)? I have found that HRs are afraid to see that trick in my projects, and prefer more traditional decisions to use vh, vw, px, %. Are rems good for adaptive and responsive web design?

@KevinPowell Год назад

Let's start with *never* use px, vh, or ce for font-size. They all have accessibility issues and shouldn't be used. There are ways with clamp/calc with viewport units where you mix in a rem value. The trick you mentioned is a bit old school, and has issues where if you bring in any 3rd party tool, it probably assumes you didn't touch the root font size. Generally, these days, leaving the html font size alone and just working in base 16 is considered best practice, and using rem for font size is 100% the right way to go. Or clamp, with something like clamp(3rem, 5vw - 0.5rem, 5rem); or something like that

@almannazyrov394 Год назад

@@KevinPowell All right, thanks for your information. I am doing this trick for adaptive / responsive design only, is it normal to decrease the percentage of font-size rather than to do everything manually with every padding, margin, container etc.?

@almannazyrov394 Год назад

@@KevinPowell I am asking you because found that trick is so useful for saving a lot of hours of pain but at the same time is weird to decrease don't size and in tablets projects will be almost the same as in desktop version. I have found that most of all use just px for everything and do responsive design, reducing all manually, that's kinda painful...

@almannazyrov394 Год назад

@@KevinPowell and final thing is that found a correlation with HRs and front-end developers who hire others and see the quality of code. They are not happy with that trick and see everything was in rems and ems units.

@wfl-junior Год назад

How do I make the columns have a max-width with the auto-fit grid? Because when there's only one card, the card would be 100% width. Let's say I want it to be max 50%, how could I do that?

@pierzobad 10 месяцев назад

Use auto-fill instead

@wfl-junior 10 месяцев назад

@@pierzobad thank you very much, very useful 🙏

@JimKernix Год назад

How do you get those unsplash images?

@rajeshpoudel06 Год назад

I'm curious about creating a masonry grid with only vanilla js. Can you create a video on that? That would be very cool.

@KevinPowell Год назад

I'm just holding out for when Safari and Chrome get around to implementing the CSS solution a few years after Firefox already did 🤣

@rajeshpoudel06 Год назад

Yeah, if the browser support is there, no need to calculate all the width and height unnecessarily.

@pgarou Год назад

It's safe use just "gap" instead of "grid-gap"?

@Tony.Nguyen137 Год назад

Why did you delete the video with the box shadow

@piusnjoku3997 Год назад

Auto fit is so great. Grid>>>>>

@twd2 Год назад

Awesome, you're a myth , Actually, I turned off using Tailwind for the Grid and using pure CSS because of your videos !!!

@ufukbakan4741 Год назад

You could achive same simplicity with flex container and giving children a min-width attribute, its the same with grid auto-fit repeat minmax.... You can do everything simpler with Flex but you cant do one thing: Densely placing elements. You can not place elements of different height in a dense flow with flex (as of 24.05.2023) . You must use "grid auto flow row dense".

@SimonChikezie 2 месяца назад

What happens when we we do grid auto columns : 1fr

@ajzack983 Год назад

well flex + clamp on the width of the children would be as nice as that grid

@florentd.5817 Год назад

Could you write correct html. Section, article, main,... !

@KevinPowell Год назад

Good point! When focusing on other things, it doesn't excuse at least get the simple stuff down even if I don't talk about it during the video... my fault when I throw together a really fast draft and then just go in to record.

@bryku Год назад

Display grid is just better display flex... change my mind.

@petarkolev6928 Год назад

Amazing video! But I like to keep my styles only in my .scss modules. When it comes to apply global class names in my markup this can become very confusing.

@AliJanahi-ki9lq Год назад

Personally, I like the grid more

@charlie-george Год назад

I've been saying this for years! Grid all the way when building from designs.

@sven_93 Год назад

man i really hate this trend of collecting as many personal data as possible where it's not even needed. I thought at least you would be different here. Why do you need to send me an email containing the cheat sheet? Why not just make it downloadable? And of course the fine print "I will send you more emails after the cheat sheet". Man, real bummer

@shonuff4323 10 месяцев назад

I noticed you seem to overuse grid

@iajaykumarsharma Год назад

I just want to use grid in my every layout it works best for me.

@javyjoshua4394 Год назад

Thanks Kevin you make learning easy, plus you are a real-life saver 🫡

@brunofrancisco9992 Год назад

document.querySelectorAll('.flex > div').forEach(div =>{ div.parentElement.setAttribute('data-column',div.length) })

@QwDragon Год назад

If you want grid to behave like a singleline flexbox (dynamic number of columns, no wrap), you can use: display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; Check codepen /Qwertiy/pen/PoyVJzx