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

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

На главную

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

wesbos's profile picture

Wes Bos

435,912 subscribers

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

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Wes Bos
Wes Bos1 год назад

Second video! Your questions + tips

Фото профиля Bruno Stasse
Bruno Stasse1 год назад

And you can make it more concise with grid-area: 1 / 1;

Фото профиля Wes Bos
Wes Bos1 год назад

👌😮‍💨 even better

Фото профиля trash
trash1 год назад

i’m using absolute like i’m coding in the stone ages

Фото профиля Wes Bos
Wes Bos1 год назад

absolute: chad;

Фото профиля James Landrum
James Landrum1 год назад

It’s a hack but a hack that I love. And one that technically the layout engine is purposely written to support.

Фото профиля Wes Bos
Wes Bos1 год назад

hah yeah, I'm not sure I'd even call it a hack - its a feature of CSS grid to have multiple items on grid rows/cols

Фото профиля Caleb Porzio
Caleb Porzio1 год назад

My guy, this is fantastic

Фото профиля Wes Bos
Wes Bos1 год назад

thanks my guy!

Фото профиля Alex Parra
Alex Parra1 год назад

Cool demo! I dreamt of this back in 2017 And in 2020 posted it was possible with grid. There’s likely updates I need to make to that posts.

Фото профиля Wes Bos
Wes Bos1 год назад

Awesome! I also included it in my course back then too. Just re-surfacing as I still don't see it used a ton

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

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

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

128,603 просмотров • 6 месяцев назад

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

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 лет назад

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,877 просмотров • 1 год назад

New timeline component pushes CSS grid to its absolute limit 🥵
0:22

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

151,123 просмотров • 3 месяцев назад

Protip: if you want to understand why more elements paint than expected (to compare rendering libraries, for example), you can use the Layer tool inspect it. hint: it's css, not javascript
0:27

Protip: if you want to understand why more elements paint than expected (to compare rendering libraries, for example), you can use the Layer tool inspect it. hint: it's css, not javascript

Ricky

29,251 просмотров • 3 месяцев назад

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.
0:34

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,196 просмотров • 2 месяцев назад

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

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

jhey ʕ•ᴥ•ʔ

207,061 просмотров • 6 месяцев назад

Are you using AI to think better or to avoid thinking? Many use AI to outsource their thinking. It's fast. It's easy. It feels productive. But it will quietly hollow you out. There's a better path, Jim VandeHei argues.
7:04

Are you using AI to think better or to avoid thinking? Many use AI to outsource their thinking. It's fast. It's easy. It feels productive. But it will quietly hollow you out. There's a better path, Jim VandeHei argues.

Axios

13,842 просмотров • 24 дней назад

"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

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

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 лет назад

CSS Position It's easier to learn something when it is animated.
1:53

CSS Position It's easier to learn something when it is animated.

Ali Reza

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

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; }
0:26

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; }

jhey ʕ•ᴥ•ʔ

117,444 просмотров • 1 год назад

🚨 Looking for the best guns & cyberlimbs to use in Off The Grid? Here are the top 4 META Loadouts the pro's use to win 10x more games. What loadout are YOU using?
13:04

🚨 Looking for the best guns & cyberlimbs to use in Off The Grid? Here are the top 4 META Loadouts the pro's use to win 10x more games. What loadout are YOU using?

'Stache

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

Indonesia, i need you to stop using whatsapp and use LINE instead 😭 I want to use this so bad legally
0:30

Indonesia, i need you to stop using whatsapp and use LINE instead 😭 I want to use this so bad legally

acha 🍦

17,831 просмотров • 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 ~
0:26

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

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

Now here are the better banks in 2026! See if you are using them instead!?
3:28

Now here are the better banks in 2026! See if you are using them instead!?

Kathleen Winchell ❤️🤍💙🇺🇸🇺🇸

45,356 просмотров • 3 месяцев назад