You can't do this without subgrid

Подписаться 915 тыс.

Просмотров 16 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

8 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@KevinPowell 2 года назад

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 2 года назад

Let's hope for the best... 😎

@emanuelmilani7976 2 года назад

Without LayoutNG finished don't think even possible sugrid

@IorPerry 2 года назад

the #SubgridAwarenessMonth gives some result!😁

@dave6012 2 года назад

🎉🎉🎉

@mahmoud-bakheet 2 года назад

Yeah that’s good news

@brandonsayring 2 года назад

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

@hemiphillips786 2 года назад

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.

@ngetichishmael 2 года назад

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 2 года назад

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.

@catherinedesrochers 2 года назад

Thanks so much 🙏

@SimonJification Месяц назад

Thanks, still helpful.

@qm3ster Год назад

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

@DeadSinceBirth 2 года назад

I Love ❤ Your Intro Music 🎶 😊 00:40

@user-ru8hn9hb5c 7 месяцев назад

Now works in every browser except IE.

@mitetoOoOoO 4 месяца назад

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

@user-zh5kg2op4h 7 месяцев назад

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

@tomsommerdk 4 месяца назад

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

@jpisello 2 года назад

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 2 года назад

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

@josipbjezancevic5697 9 месяцев назад

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!

@tooFarGonexk4he4tu3s Год назад

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

@sasca854 2 года назад

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 2 года назад

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

@kodukoders 2 года назад

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 2 года назад

why not share it here?

@kodukoders 2 года назад

@@josvelema2362 I'll share a codepen later.

@MilanRegec 2 года назад

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

@emanuelmilani7976 2 года назад

Only old guys can understand this 😂

@KevinPowell 2 года назад

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 2 года назад

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 2 года назад

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 2 года назад

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.