You can't do this without subgrid

As part of #SubgridAwarenessMonth I've looked a lot at what you can do with grid-template-columns: subgrid; but I haven't talked about rows at all. With rows, you can actually do some really awesome things, but this is a "gotcha" to using them, but they also fail very gracefully as well 😊
🔗 Links
✅ The code: codepen.io/kevinpowell/pen/KK... (only works in Firefox at the time of publication)
✅ The grid inspector: • The grid inspector: ma...
✅ My other subgrid videos: • Subgrid
✅ Other grid videos: • CSS Grid videos
⌚ Timestamps
00:00 - Introduction
01:39 - The problem with regular grid
04:33 - Setting up the ",master" grid
06:28 - Adding the subgrid
08:15 - Solving the problem with grid-template-rows
09:51 - What happens in unsupported browsers?
#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 KZbin 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!

[@KevinPowell]

A days after recording this, a Micrsoft dev started working on subgrid for Chromium! Probably a ways out still, but it's in the works! 🥳

[@amannan-123]

Let's hope for the best... 😎

[@emanuelmilani7976]

Without LayoutNG finished don't think even possible sugrid

[@IorPerry]

the #SubgridAwarenessMonth gives some result!😁

[@dave6012]

🎉🎉🎉

[@mahmoud-bakheet]

Yeah that’s good news

[@hemiphillips786]

Another scenario where sub grid would be amazing -when you want to visually show a faint grid background on the whole page, and then have elements ‘snapping’ to the background grid.

[@robmasters3569]

thank you so much for producing this channel Kevin. in the short time I have been subscribed you have taught me so much and for that I am incredibly grateful, so thank you for everything you show us, it really isn't lost on me.

[@ngetichishmael]

Prof. Kevin. You know there is a fine line between empowerment and arrogance. Some people think they are empowerment but in reality they are arrogant. However, you are empowerment. The fine line between empowerment and arrogance is humility. Just by listening to you I can tell deep down that you are very humble. You have a beautiful heart. May God bless everything you do. You are always helping other. Sharing knowledge is the greatest gift ever knighted to you. I wish had a friend like you. You are my mentor and I look up to you.

[@KevinPowell]

Thank you sooo much for the kind words 🙏♥

[@brandonsayring]

You are a true gift to the front-end dev community. Thanks for everything you do, Kevin!

[@catherinedesrochers]

Thanks so much 🙏

[@SimonJification]

Thanks, still helpful.

[@stevelam1315]

Using place-contents=center property replacing align-items under without-subgrid class works well, the two list items lign up.

[@DeadSinceBirth]

I Love ❤ Your Intro Music 🎶 😊 00:40

[@qm3ster]

They should add an infinity keyword to not have the hacky 99 there for cases like this.

[@jpisello]

I realize this is an example to demonstrate the layout method, but for actually comparing two lists of items side-by-side, from an accessibility (specifically, a screen reader) standpoint, having two separate lists is hardly ideal. For this particular use-case, a single list of "pairs" of items, which could be laid out with a single grid, would be a more accessible solution, since the items to be compared would be next to each other in the DOM, so the reading order would match what a sighted user is doing. That said, I appreciate the tutorial on how to use grid-template-rows with subgrid, and I hope the other browser makers will get behind it. (I've had to deal with exactly this layout problem, and my solution is sub-optimal without subgrid ☺.)

[@mitetoOoOoO]

I stole your --nice-shadow from the code link because I struggle with box-shadows and your is perfect and I needed it. Thanks 😅😅😅

[@josipbjezancevic5697]

Hello @KevinPowell. I just realized that it does not work in Chrome Version 116.0.5845.179 Mac OS (Experimental Web Platform features flag is on). It only works when I span list items over 9 rows max. Maybe we will have better luck with Chrome 117. Thanks a lot!

[@user-ru8hn9hb5c]

Now works in every browser except IE.

[@zxczxc6591]

Hello Kevin, could you please make a video about mobile first layout?

[@tomsommerdk]

"grid-auto-row" is now "grid-auto-rows" and the "span 99" hack produces a different result now

[@user-zh5kg2op4h]

This is situation where you probably prefer auto rows (default) to auto columns. To make columns to fit content it's probably better to use something like grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)) (you need to set meaningful minimum size to let browser decide if it fits).

[@sasca854]

Seems kinda hacky with the span 99 thing or the javascript thing... Wonder if there'll be an actual solution build into CSS someday.

[@Killyspudful]

Wouldn't grid-row: 1 / -1 work? That's the standard way of saying 'use all available rows'.

[@MilanRegec]

Well, I am just thinking, why not to use a table instead?

[@emanuelmilani7976]

Only old guys can understand this 😂

[@KevinPowell]

For some types of content like this, a table could definitely be the best choice as well! They are really hard to deal with when it comes to responsiveness as well, whereas grid/subgrid is just so easy! This could also be used for other types of content as well though, which maybe I should have focused more on here :)

[@studiosoftmorecambe6879]

Tables were designed back in the last century for just this scenario. What can grids and subgids do that can't be easily achieved with tables in far less time? What is this modern trend amongst designers who try to find a complex solution, riddled with pitfalls, for what is a very a basic layout.

[@SuperGylden]

I would also think it is tabular data which "should" be in a table. It would also benefit accessibility as the data are easier to compare between rows

[@fabianmeyertoens]

1. Table markup has to be row based. Grid does not have this limitation. 2. Table columns can only be styled with a handful of properties. A border radius like in the video wouldn't be possible.

[@kodukoders]

Hey, I have found a solution in which you don't need a subgrid from your previous post on responsive layouts using subgrid. If you allow me I'll send you the code.

[@josvelema2362]

why not share it here?

[@kodukoders]

@@josvelema2362 I'll share a codepen later.

[@tooFarGonexk4he4tu3s]

I would be so confused if I saw something like all grid items stacking on top of one another

[@aram5642]

So sad it's still missing from Chrome at the time of writing. My forms waiting so badly for it.

[@KevinPowell]

It's getting closer... I was hoping by the end of this year, but I think by Q1 next year we have it.

[@TeHzoAr]

this is what tables are for

[@travisv]

Tables are for tabular data, not layout.

[@TeHzoAr]

@@travisv you're the guy that reads the can of WD-40 to make sure it's an approved use