Two simple layouts that work better with Grid

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

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

[@brianriback6285]

You are, by far, the best teacher around!

[@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

[@kunal007216]

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

[@paulhildmann8392]

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

[@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

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

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

[@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

[@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

[@herbowenby4357]

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

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

[@hamoodhabibi7026]

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

[@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

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

[@CyberTechBits]

Fantastic tutorial and demo!

[@securefolder4548]

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

[@VarunPats]

Thanks, amazing as always! 😍

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

[@neoweiter]

you are the best of all

[@sorasitsuprapoch5921]

thanks, its been very helpful

[@rem2764]

useful comparison, thanks

[@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

[@MrKOHKyPEHT]

Most common requirement for cards: aligned content

[@MrSurfsAlot]

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

[@mannuelf]

awesome! thank you sir.

[@Salmancreationbd]

Masterpiece, Thanks a lot Many Issues fixed. Loved

[@hassan2868-u7q]

Thank you.

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

[@aleksandr95]

Thx for video!

[@kaneel36]

variables in css3. impressive!

[@lukas.webdev]

Awesome video! Thanks for sharing. 😉🔥

[@prodbybarn]

Thanks you for your awesome videos

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

[@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?

[@clevermissfox]

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

[@Alex.Shalda]

wonderful content!

[@fai6702]

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

[@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]

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]

@@clevermissfox Thanks

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

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

[@usmanqayyum109]

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

[@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

[@enzoaltamirano21]

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?

[@steveportasUKUS]

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?

[@KelseyThornton]

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

[@johny962]

amazing

[@dhanbirsunwar6374]

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

[@TheMetalMag]

the grid man :)

[@jorgegamboa5408]

Awesome

[@aram5642]

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?

[@serychristianrenaud]

thank

[@war-fare06]

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 🤣

[@war-fare06]

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

[@rem2764]

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

[@KevinPowell]

100% yes!

[@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]

Use auto-fill instead

[@wfl-junior]

@@pierzobad thank you very much, very useful 🙏

[@alman_harbi]

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

[@alman_harbi]

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

[@alman_harbi]

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

[@alman_harbi]

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

[@Tony.Nguyen137]

Why did you delete the video with the box shadow

[@JimKernix]

How do you get those unsplash images?

[@pgarou]

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

[@anthonyokonkwo3493]

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

[@SimonChikezie]

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

[@javyjoshua4394]

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

[@twd2]

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

[@bryku]

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

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

[@piusnjoku3997]

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

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

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

[@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

[@AliJanahi-ki9lq]

Personally, I like the grid more

[@shonuff4323]

I noticed you seem to overuse grid

[@iajaykumarsharma]

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

[@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