Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

9 Yorum

FoozleBob profil fotoğrafı
FoozleBob2 yıl önce

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

Igor bedesqui profil fotoğrafı
Igor bedesqui2 yıl önce

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

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

Gustav Ekerot profil fotoğrafı
Gustav Ekerot2 yıl önce

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

Made a quick prototype in UnoCSS

Nate MacInnes profil fotoğrafı
Nate MacInnes2 yıl önce

Named grid FTW

JEM profil fotoğrafı
JEM2 yıl önce

great updates 👏 was fun to explore!

VirtualJester.x profil fotoğrafı
VirtualJester.x2 yıl önce

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

@readwise save thread

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,843 görüntüleme • 4 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,963 görüntüleme • 9 ay önce

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

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

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

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

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

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

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

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

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

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

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

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

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

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