Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

wesbos's profile picture

Wes Bos

434,980 subscribers

302,042 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

Second video! Your questions + tips

Bruno Stasse profil fotoğrafı
Bruno Stasse1 yıl önce

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

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

👌😮‍💨 even better

trash profil fotoğrafı
trash1 yıl önce

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

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

absolute: chad;

James Landrum profil fotoğrafı
James Landrum1 yıl önce

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

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

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 profil fotoğrafı
Caleb Porzio1 yıl önce

My guy, this is fantastic

Wes Bos profil fotoğrafı
Wes Bos1 yıl önce

thanks my guy!

Alex Parra profil fotoğrafı
Alex Parra1 yıl önce

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 profil fotoğrafı
Wes Bos1 yıl önce

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

Benzer Videolar

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 görüntüleme • 1 ay önce

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,494 görüntüleme • 6 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

149,457 görüntüleme • 3 ay önce

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 görüntüleme • 2 ay önce

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,155 görüntüleme • 1 ay önce

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

206,779 görüntüleme • 6 ay önce

"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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 3 yıl önce

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,372 görüntüleme • 1 yıl önce

🚨 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,139 görüntüleme • 1 yıl önce

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,554 görüntüleme • 2 yıl önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 3 ay önce

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

104,532 görüntüleme • 7 ay önce

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

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

nishan (o^▽^o)

68,343 görüntüleme • 6 ay önce