正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

146,193 subscribers

128,494 次观看 • 6 个月前 •via X (Twitter)

艺术教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

206,779 次观看 • 6 个月前

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jhey ʕ•ᴥ•ʔ

44,674 次观看 • 1 年前

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Jess Chan | Coder Coder

11,606 次观看 • 1 个月前

Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead!

Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead!

Wes Bos

302,042 次观看 • 1 年前

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; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

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; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

507,551 次观看 • 2 年前

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

79,784 次观看 • 1 年前

$CSS container query for when an element is stuck with position: sticky 🔥 nav { container-type: scroll-state; } @container scroll-state(stuck: top) { .nav__content { --expand: 1; } } use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎$

CSS container query for when an element is stuck with position: sticky 🔥 nav { container-type: scroll-state; } @container scroll-state(stuck: top) { .nav__content { --expand: 1; } } use custom property to morph CTA into a nav bar with transitioned grid-template-columns 😎

jhey ʕ•ᴥ•ʔ

88,665 次观看 • 1 年前

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 次观看 • 2 年前

The CSS Grid Builder that now ships with Gutenberg is 🔥👇

The CSS Grid Builder that now ships with Gutenberg is 🔥👇

Jamie Marsland - Head of WordPress YouTube ❤️

17,045 次观看 • 2 年前

Is this a hack? What about stack order? Fine grain control? A few more tips on using CSS Grid instead of absolute positioning. I really like the named grid area one!

Is this a hack? What about stack order? Fine grain control? A few more tips on using CSS Grid instead of absolute positioning. I really like the named grid area one!

Wes Bos

103,037 次观看 • 1 年前

Master CSS Grid in 2 CSS lines!

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 次观看 • 1 年前

here's how the stacked grids work 🤙 same animation but adjusted easing for each scroll animation so the grids are scaling up to match the parent don't need to use CSS subgrid here but opens it up to some different effects where you could do grid fragments 🤓

here's how the stacked grids work 🤙 same animation but adjusted easing for each scroll animation so the grids are scaling up to match the parent don't need to use CSS subgrid here but opens it up to some different effects where you could do grid fragments 🤓

jhey ʕ•ᴥ•ʔ

118,844 次观看 • 1 年前

CSS Subgrid is now Baseline Widely Available across all major engines → It allows nested elements to inherit and align with their parent’s grid tracks, ensuring perfect alignment across complex layouts without manual sizing hacks.

CSS Subgrid is now Baseline Widely Available across all major engines → It allows nested elements to inherit and align with their parent’s grid tracks, ensuring perfect alignment across complex layouts without manual sizing hacks.

Chrome for Developers

47,605 次观看 • 1 个月前

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

125,904 次观看 • 1 年前

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Alamin

136,213 次观看 • 3 年前

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

104,532 次观看 • 7 个月前

a 3D CSS breakdown of what's happening 🤙 the trick is background-image layers powered by the same custom property for position and size then that's combined with a background-clip combo ✂️

a 3D CSS breakdown of what's happening 🤙 the trick is background-image layers powered by the same custom property for position and size then that's combined with a background-clip combo ✂️

jhey ʕ•ᴥ•ʔ

46,837 次观看 • 1 年前

Use CSS Grid to stack items, and visibility: hidden to hide/show spinner. This approach allows the largest item to size the button, and keeps the button text accessible

Use CSS Grid to stack items, and visibility: hidden to hide/show spinner. This approach allows the largest item to size the button, and keeps the button text accessible

Wes Bos

176,912 次观看 • 1 年前

Here is a patch to test CSS grid in React native.

Here is a patch to test CSS grid in React native.

nishan (o^▽^o)

68,343 次观看 • 5 个月前

Quickly and easily create a CSS Grid layout for your website!

Quickly and easily create a CSS Grid layout for your website!

Marko Denic

211,198 次观看 • 1 年前