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

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

На главную

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

wesbos's profile picture

Wes Bos

437,262 subscribers

302,188 просмотров • 2 лет назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Wes Bos
Wes Bos2 лет назад

Second video! Your questions + tips

Фото профиля Bruno Stasse
Bruno Stasse2 лет назад

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

Фото профиля Wes Bos
Wes Bos2 лет назад

👌😮‍💨 even better

Фото профиля trash
trash2 лет назад

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

Фото профиля Wes Bos
Wes Bos2 лет назад

absolute: chad;

Фото профиля James Landrum
James Landrum2 лет назад

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

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

My guy, this is fantastic

Фото профиля Wes Bos
Wes Bos2 лет назад

thanks my guy!

Фото профиля Alex Parra
Alex Parra2 лет назад

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

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

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

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

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

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

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

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

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

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,948 просмотров • 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,591 просмотров • 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,167 просмотров • 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,746 просмотров • 3 лет назад

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

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

Twitter UI is a beast to style. Responsive is still rough, ended up using grid for the 3 main columns. Using Tailwind CSS and Next JS for components. Will deploy to Vercel when ready
0:24

Twitter UI is a beast to style. Responsive is still rough, ended up using grid for the 3 main columns. Using Tailwind CSS and Next JS for components. Will deploy to Vercel when ready

Roy Quilor

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

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
4:41

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

177,171 просмотров • 1 год назад

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨
2:19

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

Simon Vrachliotis

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