Загрузка видео...

Не удалось загрузить видео

На главную

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid;...

507,746 просмотров • 3 лет назад •via X (Twitter)

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

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈3 лет назад

Here's that @CodePen link! 🚀 Available in Firefox, Safari, and Chrome 117+ 🤙 Now go forth and show off your CSS Grid superpowers. Keen to see what people come up with. Found it tricky to find use cases when I presented this last year 🤓

Фото профиля Mohamed Ramadan
Mohamed Ramadan3 лет назад

That is really very interseting trick! But lets wait untill it become fully supported ⚠️

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈3 лет назад

P.s I know these cards are ugly 😅

Фото профиля Simon Ramsay 🚀 🧞‍♂️ 𝕩
Simon Ramsay 🚀 🧞‍♂️ 𝕩3 лет назад

Seem so simple. Does it automatically work out the best heights for each row?

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈3 лет назад

Yeah, the "magic" of implicit grid tracks at play there and working it out off the parent layout 😍 I had to present it at the back end of last year and was hunting around for ways to make use of it 😅

Фото профиля Estebandido
Estebandido3 лет назад

@Alejo_Gamboa

Фото профиля EREIAMJH
EREIAMJH3 лет назад

I *really* needed this a few months ago. Found subgrid, then cried when I saw the browser support. Ended up with Javascript workaround. Guess I'll revisit in a few months if it's imminent.

Фото профиля Pedro Filho
Pedro Filho3 лет назад

This is one of the few use cases that I really use grid

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈3 лет назад

For cards? I find myself often jus' kinda fluidly switching between flex and grid as and when it feels right which is a weird thing to do I guess 😅

Фото профиля Morgan - Freelance frontend developer
Morgan - Freelance frontend developer3 лет назад

This is one of the use-cases for sub-grid Rachel Andrew wrote about yonks ago. It’s great.

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈3 лет назад

It's nice to finally see it coming into all the browsers. There was a little inconsistency still when I presented it last year. Looks like that is getting ironed out 🙌 Could you think of any other interesting layout use cases?

Похожие видео

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @​keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @​media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @​container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

542,898 просмотров • 2 лет назад