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

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

На главную

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,039 subscribers

117,370 просмотров • 1 год назад •via X (Twitter)

Наука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Pavel Ivanov
Pavel Ivanov1 год назад

yeah :) I use something close to this in react-scan! The old min/max-height hacks are no more!

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

yeah - solid solution until we get decent support for interpolate-size 🙏

Фото профиля MGSimard
MGSimard1 год назад

Oh man inert is a thing? yoink

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

yep!🤙 so good for things where you need to hide from AT etc. but don't really want to use display none

Фото профиля Arthur
Arthur1 год назад

Bro is working on Vercel itself...

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

🫡

Фото профиля Diogo
Diogo1 год назад

Didn't know about this inert attribute. Cool.

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

super useful 💯 being able to hide things without juggling display none makes transitions so much easier 🙌

Фото профиля Roo and Sashas Happy Days
Roo and Sashas Happy Days1 год назад

how does inert effect accessibility when using keyboard with these buttons

Фото профиля Typzo
Typzo1 год назад

Probably one of the best tricks grid has to offer!

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

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍
0:28

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,057 просмотров • 8 месяцев назад

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳
0:36

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,131 просмотров • 7 месяцев назад

🏆 The Holy Grail Layout 🏆 Using grid-template you can write rows and columns all at the same time all with one line of code (kinda). More modern CSS layout tips →
0:56

🏆 The Holy Grail Layout 🏆 Using grid-template you can write rows and columns all at the same time all with one line of code (kinda). More modern CSS layout tips →

Chrome for Developers

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

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! 👇
0:28

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,529 просмотров • 2 лет назад

CSS scroll-driven "CTA to Nav" 🗺️ nav { grid-template-columns: auto calc(var(--grow) * 240px) auto; transition: 1s var(--custom); } @​keyframes expand { to { --expand: 1; } } body { animation: expand steps(1); animation-timeline: --hero; animation-range: exit; }
0:36

CSS scroll-driven "CTA to Nav" 🗺️ nav { grid-template-columns: auto calc(var(--grow) * 240px) auto; transition: 1s var(--custom); } @​keyframes expand { to { --expand: 1; } } body { animation: expand steps(1); animation-timeline: --hero; animation-range: exit; }

jhey ʕ•ᴥ•ʔ

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

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅
0:22

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

285,140 просмотров • 1 год назад

¡Nueva forma de centrar un DIV con CSS! Sin usar display flex o grid ↓
0:22

¡Nueva forma de centrar un DIV con CSS! Sin usar display flex o grid ↓

Miguel Ángel Durán

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

A few Grid (still in beta) updates for you → Set min and max → Delete columns/rows → Adjust multiple grids
0:50

A few Grid (still in beta) updates for you → Set min and max → Delete columns/rows → Adjust multiple grids

Figma

103,726 просмотров • 11 месяцев назад

Popover nav bar without JavaScript 🤙 <nav><ul><li><button popovertarget=menu>... <div popover=auto id=menu> ...content </div> Tweak timings with CSS linear() 🎬 Transitions with @​starting-style Anchor positioning to position and size things 🤏
0:44

Popover nav bar without JavaScript 🤙 <nav><ul><li><button popovertarget=menu>... <div popover=auto id=menu> ...content </div> Tweak timings with CSS linear() 🎬 Transitions with @​starting-style Anchor positioning to position and size things 🤏

jhey ▲🐻🎈

124,577 просмотров • 1 год назад

“MOST SUCCESFUL DRIVERS ON THE GRID WILL LINE UP 8 METERS APART” welcome back 4433 front rows how I’ve missed you
0:27

“MOST SUCCESFUL DRIVERS ON THE GRID WILL LINE UP 8 METERS APART” welcome back 4433 front rows how I’ve missed you

💭

189,954 просмотров • 1 год назад

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

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

CodePen.IO

79,784 просмотров • 1 год назад

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 просмотров • 1 год назад

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

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

Jess Chan | Coder Coder

11,606 просмотров • 1 месяц назад

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 👇
0:27

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 ʕ•ᴥ•ʔ

127,638 просмотров • 5 месяцев назад

Another weekend project: GridStore Jean Cavallera and I are building simple but useful dApps that make LUKSO more accessible and easier to use. This is GridStore, an “app store” for Grid templates. You can choose a template you like and, with a single transaction, upload it to your Universal Profile and use it as your Grid. This is made possible by LSP28 The Grid, where the configurations of your Grid are stored in a JSON file on IPFS. The value stored under your ⁩LSP28TheGrid⁨ data key stored on your Universal Profile points to your grid configuration JSON file. By adding the value of a grid template you like under the ⁩LSP28TheGriddata key, you can set immediately that template on your Grid and start customizing it, saving you time. If you have ideas for useful templates for brands, artists, influencers, or any other use case: set up the Grid on a Universal Profile, go to look up the profile, and send me the “Raw value” together with a short explanation of the Grid so it can be added to the store. Or add your own templates to the store by opening a PR: It would really help if we can create some high-quality templates that the whole community can use. You can check out the store here:
1:21

Another weekend project: GridStore Jean Cavallera and I are building simple but useful dApps that make LUKSO more accessible and easier to use. This is GridStore, an “app store” for Grid templates. You can choose a template you like and, with a single transaction, upload it to your Universal Profile and use it as your Grid. This is made possible by LSP28 The Grid, where the configurations of your Grid are stored in a JSON file on IPFS. The value stored under your ⁩LSP28TheGrid⁨ data key stored on your Universal Profile points to your grid configuration JSON file. By adding the value of a grid template you like under the ⁩LSP28TheGriddata key, you can set immediately that template on your Grid and start customizing it, saving you time. If you have ideas for useful templates for brands, artists, influencers, or any other use case: set up the Grid on a Universal Profile, go to look up the profile, and send me the “Raw value” together with a short explanation of the Grid so it can be added to the store. Or add your own templates to the store by opening a PR: It would really help if we can create some high-quality templates that the whole community can use. You can check out the store here:

JordyDutch

14,060 просмотров • 4 месяцев назад

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.
0:39

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

Alamin

136,213 просмотров • 3 лет назад

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 😎
0:29

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

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

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

Wes Bos

302,037 просмотров • 1 год назад

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇
0:30

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,404 просмотров • 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!
2:28

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