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

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

На главную

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!

wesbos's profile picture

Wes Bos

436,949 subscribers

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

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля FoozleBob
FoozleBob2 лет назад

CSS grid areas are amazing! Can highly recommend that post:

Фото профиля Igor bedesqui
Igor bedesqui2 лет назад

I love this so much, dom order is such an intuitive stacking model, no need to think about absolute creating a new "layer group"

Фото профиля Typzo
Typzo2 лет назад

Grid for the win! Absolute positioning still has a space to live though

Фото профиля Gustav Ekerot
Gustav Ekerot2 лет назад

I want a little Wes avatar that pops up on my screen every time I reach for pos: absolute and remind me of this

Фото профиля Maxi
Maxi1 год назад

Made a quick prototype in UnoCSS

Фото профиля Nate MacInnes
Nate MacInnes2 лет назад

Named grid FTW

Фото профиля JEM
JEM2 лет назад

great updates 👏 was fun to explore!

Фото профиля VirtualJester.x
VirtualJester.x2 лет назад

Good follow up video Wes! Had a read on the grid and it seems there might be performance issues. Have you done a comparison of a grid page vs a normal div page?

Фото профиля Cosy Studios
Cosy Studios2 лет назад

@readwise save thread

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

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 месяцев назад

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

Spectacular website that visualizes the world power grid! Meet Open Grid Works. I spent hours on this site. I have an AI agent working with AI on a project using this site. Link:
2:40

Spectacular website that visualizes the world power grid! Meet Open Grid Works. I spent hours on this site. I have an AI agent working with AI on a project using this site. Link:

Brian Roemmele

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

Some different opinions on this one 👀 At least we have a few funny drivers on the grid 🤣😂 #F1
0:38

Some different opinions on this one 👀 At least we have a few funny drivers on the grid 🤣😂 #F1

Formula 1

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

Iran is the Most Important Country to Lockdown for a Digital Control Grid- Catherine Austin Fitts Catherine Austin Fitts served as Assistant Secretary of Housing under President George H. W. Bush and is the publisher of The Solari Report. She talks how the Iran conflict is part of the control grid, future of Israel, Covid 2.0, bitcoin being used as a control grid, and much more. PLEASE SUBSCRIBE LIKE AND SHARE THIS PODCAST!!! The Solari Report | Catherine Austin Fitts Michael Yon: Callsign BIG HONEY 我那覇真子 Masako Ganaha
1:27

Iran is the Most Important Country to Lockdown for a Digital Control Grid- Catherine Austin Fitts Catherine Austin Fitts served as Assistant Secretary of Housing under President George H. W. Bush and is the publisher of The Solari Report. She talks how the Iran conflict is part of the control grid, future of Israel, Covid 2.0, bitcoin being used as a control grid, and much more. PLEASE SUBSCRIBE LIKE AND SHARE THIS PODCAST!!! The Solari Report | Catherine Austin Fitts Michael Yon: Callsign BIG HONEY 我那覇真子 Masako Ganaha

Michael Farris

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

The Liberal government just locked in their 2035 ban on gas-powered cars, but why? Climate change doesn’t check out and the grid can’t support a nation of EVs Is this more about control than climate change?
2:55

The Liberal government just locked in their 2035 ban on gas-powered cars, but why? Climate change doesn’t check out and the grid can’t support a nation of EVs Is this more about control than climate change?

BlendrNews

197,827 просмотров • 1 год назад

Here's a look at how the mattress physics look using my debug view. A mattress is essentially a 3x5 grid of rigid bodies connected with joints to flex, and then stacked on another grid kinda like 2 pieces of bread, with springs between them for compression
0:30

Here's a look at how the mattress physics look using my debug view. A mattress is essentially a 3x5 grid of rigid bodies connected with joints to flex, and then stacked on another grid kinda like 2 pieces of bread, with springs between them for compression

Walaber

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

how to program a tempo change in the beat grid on rekordbox! this is my biggest life hack on how to dj genre to genre seamlessly
2:17

how to program a tempo change in the beat grid on rekordbox! this is my biggest life hack on how to dj genre to genre seamlessly

John Summit

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

Earlier this morning on Channels Television, we discussed about the recent grid collapse challenges and the way forward. I disagree that every state should have its own grid. Centralisation of the grid is still the most efficient and effective means of delivering service to consumers. Watch all:
5:18

Earlier this morning on Channels Television, we discussed about the recent grid collapse challenges and the way forward. I disagree that every state should have its own grid. Centralisation of the grid is still the most efficient and effective means of delivering service to consumers. Watch all:

Habu Sadeik

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

WHAT’S HAPPENING TO THE GRID RIGHT NOW? This isn’t just one location. New Jersey — freeway lights started flickering all at once. A full stretch… moving together. On. Off. On. Off. That’s not random. And here’s what makes this different… I’ve received hundreds of reports like this from around the world. 👇 Is this just a glitch… or something affecting the grid? #MrMBB333 #PowerGrid #NewJersey
0:37

WHAT’S HAPPENING TO THE GRID RIGHT NOW? This isn’t just one location. New Jersey — freeway lights started flickering all at once. A full stretch… moving together. On. Off. On. Off. That’s not random. And here’s what makes this different… I’ve received hundreds of reports like this from around the world. 👇 Is this just a glitch… or something affecting the grid? #MrMBB333 #PowerGrid #NewJersey

Michael Bradbury

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

WTF… They want control of WHAT in your home?! A woman is going viral after claiming her utility company temporarily prevented her from lowering her thermostat due to “stress on the power grid”… More like a power grab to me. What do you think, folks?
1:05

WTF… They want control of WHAT in your home?! A woman is going viral after claiming her utility company temporarily prevented her from lowering her thermostat due to “stress on the power grid”… More like a power grab to me. What do you think, folks?

David Nino Rodriguez

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

Console games on iOS have been something of a mixed bag, but Codemasters' GRID Legends on an iPhone 15 Pro is one of the more impressive offerings:
0:51

Console games on iOS have been something of a mixed bag, but Codemasters' GRID Legends on an iPhone 15 Pro is one of the more impressive offerings:

Digital Foundry

76,122 просмотров • 1 год назад

I decided to make a grid material that is always aligned with the building grid... Then I thought, why not share it? 👇LINK IN COMMENTS👇 Fully customizable: -Disable fill color (outline only) -Disable padding color (fill only) -Roundness control -Color control Perfect for cheap grid floors and walls. You can combine it with other world-aligned materials like in this video. #UEFN
0:36

I decided to make a grid material that is always aligned with the building grid... Then I thought, why not share it? 👇LINK IN COMMENTS👇 Fully customizable: -Disable fill color (outline only) -Disable padding color (fill only) -Roundness control -Color control Perfect for cheap grid floors and walls. You can combine it with other world-aligned materials like in this video. #UEFN

OzyCreates

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

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

Oh dear... I think I touched a nerve👀 Ed Miliband said I was ‘scaremongering’ because I asked who was responsible in the event of a blackout and what repercussions there would be. That’s because on the 2nd May our grid suffered a significant, sudden frequency loss. This could result in nationwide blackouts. Ed’s policies are making our grid more unstable, more unpredictable, and more expensive to balance. Who pays? You, the consumer. And weirdly, he doesn’t seem to know who is accountable. Ofgem? NESO? DESNZ? We need to know who is in charge and what accountability they will face for a more unreliable and costly electricity grid. It shouldn’t be this hard to answer a simple question.
0:55

Oh dear... I think I touched a nerve👀 Ed Miliband said I was ‘scaremongering’ because I asked who was responsible in the event of a blackout and what repercussions there would be. That’s because on the 2nd May our grid suffered a significant, sudden frequency loss. This could result in nationwide blackouts. Ed’s policies are making our grid more unstable, more unpredictable, and more expensive to balance. Who pays? You, the consumer. And weirdly, he doesn’t seem to know who is accountable. Ofgem? NESO? DESNZ? We need to know who is in charge and what accountability they will face for a more unreliable and costly electricity grid. It shouldn’t be this hard to answer a simple question.

Claire Coutinho

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

Been experimenting with more shaders! This one adds a grid-like scanline effect, kind of like the Nintendo DS or Game Boy Color screens. Also, I've been working on several new enemies lately! Wishlist: #screenshotsaturday
0:22

Been experimenting with more shaders! This one adds a grid-like scanline effect, kind of like the Nintendo DS or Game Boy Color screens. Also, I've been working on several new enemies lately! Wishlist: #screenshotsaturday

🇦🇷Ezequiel | Wishlist Hayaku on Steam!

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