Center the bottom row when using grid auto-fit

Grid’s auto-fit is amazing, but sometimes it would be nice if the bottom row could be centered instead of always starting on the left side. Well, after being inspired by Ryan Mulligan, I figured out a way to do it!

I’ll be honest, it’s not the simplest thing in the world, but there’s a lot to learn in getting it working, and once you understand how it works, it’s not that complicated!

🔗 Links
✅ Ryan Mulligan’s post that sent me down this rabbit hole: ryanmulligan.dev/blog/grid-stacks/
✅ The code from this video: codepen.io/kevinpowell/pen/KKOvJQy
✅ The version that works in Safari: codepen.io/kevinpowell/pen/KKORKGa
✅ The webkit bug report: bugs.webkit.org/show_bug.cgi?id=282326
✅ I’m on Bluesky now: bsky.app/profile/kevinpowell.co
✅ And Mastadon: front-end.social/@kevinpowell
✅ I’ve got courses! kevinpowell.co/courses

⌚ Timestamps
00:00 - Introduction
00:45 - Maybe flexbox is what you want but there are limitations
03:50 - Being inspired by Ryan Mulligan
06:20 - Setting things up to center leftover elements with grid-auto-fit
09:50 - You need everything to span 2 columns
14:00 - Centering the last-child when we have “two” columns
17:30 - Centering the low row when we have “three” columns

#css

--

Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK

Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
📽️ Join as a channel member: youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join
💖 Support me on Patreon: www.patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:
youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: twitter.com/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