正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

436,949 subscribers

103,902 次观看 • 2 年前 •via X (Twitter)

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:

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 👇

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 →

🏆 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:

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

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

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?

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

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

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:

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

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?

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:

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

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! 👇

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.

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

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 个月前