A Grid of Squares

[@vcoppolecchia]

The way you explain things is, for me, always very clear and over the years I follow you (7-8 years I think) it has been useful countless times! I can't thank you enough! :)

[@torleiftorgo9979]

This was almost exactly what I needed, thanks! Tip: if you have fewer grid items than will fill out a single row, use "auto-fit" instead of "auto-fill" in grid-template-columns. This will make the grid items "greedy" in that they will fill out the remaining space. Otherwise CSS Grid will make up empty grid spaces to fill out the remaining space, leaving your items capped to some arbitrary(?) maximum width. This could be useful if you have a dynamic number of items, for instance, and you always want the grid filled out to its full width.

[@y.5107]

Excellent. First time watcher. This really helped me. One thing maybe for future videos: It would be good if you say a sentence or two to browser support and when those technologies became available. Thanks for your work!

[@swyxTV]

that was masterful. thanks and please do more videos!! loving it

[@frogskocinq]

Found your site while researching a problem and ended up watching this video (not the problem). Blown away by your super powers. Thanks for making these. #subscribed

[@jacobmiranda3144]

You have 100% likes for a reason! I love how you explain multiple ways of doing the same thing :)

[@matthewbloomfield5580]

This is so well done, definitely sharing! Thank you, Chris!

[@chriscarey4618]

Brilliant video, thank you Chris! This is by far the best explanation i've found!

[@BillHorsman]

Nice tip, Chris. This has already found its way into the Vito code today. I love the style of this video. Thanks!

[@pablowbk]

Thanks a lot Chris! I've struggled with this aspect ratio issue a couple of weeks ago, and ended up with a weird hack using vw for the columns and rows, ugghh it didn't feel right. Glad I watched your video today, now I can finally sleep peacefully

[@Wardret]

one of the most useful videos you have posted :D, you deserve a like for this padding trick

[@ceciliaorji8894]

Thanks Chris, really helped me a lot was struggling with grids before

[@astrit]

Nicely explained 🙏

[@imLOSTirl]

I was struggling with this on my last site. I had to do a few breakpoints and have the square's widths set to say 33vw and then set their min-height to 33vw too. Wasn't perfect squares though as it didn't account for padding / margins / grid gaps. This is a nice little trick.

[@bafian]

thanks man, amazing content !!!

[@aminwejebeshanahan7137]

thanks again chris

[@AdamArgyleInk]

nice one!

[@Froggie92]

hey chris have you heard of the new css property: inset?

[@riebeck1986]

Hi I have a doubt in this. What if the image is more than the container here, how should I still make it so that image resizes itself and end grid remains as a square

[@AndrewRMillar]

Couldn't you also do the positioning using display flex on the div's and then do align-items: center; and justify-content: center;? That is the way I would most likely do something like this.

[@AndrewRMillar]

@@realcsstricks Understandable, but as I rarely use grid I always feel I need to learn it all over again whenever I choose to use it, which is not often. I then find flex easier on the brain. Even though I don't see a way to solve this specific use case using only flex, and would seem like screwing a screw using a hamer.

[@bonifiedwyrdquietguyesq]

Is that straight css or was that in bootstrap or some other library?

[@Mike-lu1pt]

This doesn't work if you try it in a horizontally scrolling container

[@_viy]

Hey whatsup with css-tricks forum, it's gone because of spam? I don't believe it! Do you heard of captcha?))

[@ChrisCoyier]

Spam was bad, it's true. And we just didn't have the resources to keep up with it and give it the love it deserved.

[@jernejdroljc8858]

First :D