You can't do this without subgrid

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

[@brandonsayring]

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

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

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

[@stevelam1315]

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

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

[@levsonc]

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

[@SimonJification]

Thanks, still helpful.

[@catherinedesrochers]

Thanks so much 🙏

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

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

[@AlexanderBelov-y8o]

Now works in every browser except IE.

[@Dimitar-T-Radev]

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

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

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

[@learnwithabdulbari]

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?

[@learnwithabdulbari]

@@josvelema2362 I'll share a codepen later.

[@VideoNOLA]

So "subgrid" is to "mail merge" as "grid" was to "mailing labels".

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

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