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.

@ 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

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

Most common requirement for cards: aligned content

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

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.

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

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

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

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.

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

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

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

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!

You are, by far, the best teacher around!

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

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

Thanks, amazing as always! 😍

Masterpiece, Thanks a lot Many Issues fixed. Loved

Fantastic tutorial and demo!

thanks, its been very helpful

Awesome video! Thanks for sharing. 😉🔥

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

useful comparison, thanks

awesome! thank you sir.

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

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.

Thanks you for your awesome videos

Thx for video!

Thank you.

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

wonderful content!

you are the best of all

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

variables in css3. impressive!

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

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?

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

amazing

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

Awesome

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

thank

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

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

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

7 ай бұрын

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

7 ай бұрын

@@clevermissfox Thanks

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

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?

the grid man :)

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?

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

@KevinPowell

Жыл бұрын

100% yes!

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

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.

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?

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.

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

How do you get those unsplash images?

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

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

11 ай бұрын

Use auto-fill instead

@wfl-junior

11 ай бұрын

@@pierzobad thank you very much, very useful 🙏

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.

Why did you delete the video with the box shadow

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

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

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

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

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

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

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

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.

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.

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

Personally, I like the grid more

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

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

I noticed you seem to overuse grid

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

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

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