正在加载视频...

视频加载失败

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

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

435,298 subscribers

103,877 次观看 • 1 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 条评论

FoozleBob 的头像

FoozleBob1 年前

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

Igor bedesqui 的头像

Igor bedesqui1 年前

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 的头像

Typzo1 年前

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

Gustav Ekerot 的头像

Gustav Ekerot1 年前

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 MacInnes1 年前

Named grid FTW

JEM 的头像

JEM1 年前

great updates 👏 was fun to explore!

VirtualJester.x 的头像

VirtualJester.x1 年前

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 Studios1 年前

@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,606 次观看 • 2 个月前

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,603 次观看 • 6 个月前

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

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

Wes Bos

302,062 次观看 • 1 年前

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jhey ʕ•ᴥ•ʔ

44,674 次观看 • 1 年前

🏆 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 次观看 • 2 年前

New timeline component pushes CSS grid to its absolute limit 🥵

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

150,687 次观看 • 3 个月前

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 ~

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

114,785 次观看 • 7 个月前

I built a realtime LED grid and let the internet control it. Here is the stack: Cloudflare Durable objects Partykit React + Websockets ESP32 microcontroller 3D printing + lots of soldering

I built a realtime LED grid and let the internet control it. Here is the stack: Cloudflare Durable objects Partykit React + Websockets ESP32 microcontroller 3D printing + lots of soldering

Wes Bos

29,801 次观看 • 10 个月前

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

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

nishan (o^▽^o)

68,358 次观看 • 6 个月前

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,478 次观看 • 2 个月前

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; }

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,410 次观看 • 1 年前

A few signatures on the way back to the grid.

A few signatures on the way back to the grid.

Hendrick Motorsports

18,838 次观看 • 1 年前

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 次观看 • 2 个月前

a little garbage duel between rivals this boss fight is on a limited battle grid (only 1 row instead of 3)

a little garbage duel between rivals this boss fight is on a limited battle grid (only 1 row instead of 3)

👑 Kingdoms of the Dump🗑

10,822 次观看 • 1 年前

Master CSS Grid in 2 CSS lines!

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 次观看 • 1 年前

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

80,298 次观看 • 2 年前

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 次观看 • 2 个月前

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,747 次观看 • 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,713 次观看 • 3 个月前

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

207,007 次观看 • 6 个月前