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

435,298 subscribers

103,877 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

9 Yorum

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

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

Igor bedesqui profil fotoğrafı
Igor bedesqui1 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ı
Typzo1 yıl önce

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

Gustav Ekerot profil fotoğrafı
Gustav Ekerot1 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 MacInnes1 yıl önce

Named grid FTW

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

great updates 👏 was fun to explore!

VirtualJester.x profil fotoğrafı
VirtualJester.x1 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 Studios1 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,606 görüntüleme • 1 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,494 görüntüleme • 6 ay önce

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

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

Wes Bos

302,062 görüntüleme • 1 yıl önce

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

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

jhey ʕ•ᴥ•ʔ

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

New timeline component pushes CSS grid to its absolute limit 🥵
0:22

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

150,687 görüntüleme • 3 ay önce

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 ~
0:26

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

104,532 görüntüleme • 7 ay önce

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
2:33

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

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

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

nishan (o^▽^o)

68,358 görüntüleme • 6 ay ö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,046 görüntüleme • 2 ay önce

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

A few signatures on the way back to the grid.
0:29

A few signatures on the way back to the grid.

Hendrick Motorsports

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

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

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

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 görüntüleme • 1 yıl önce

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

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

CodePen.IO

80,298 görüntüleme • 1 yıl ö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 • 2 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,747 görüntüleme • 11 ay ö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,713 görüntüleme • 3 ay önce

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

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

jhey ʕ•ᴥ•ʔ

206,779 görüntüleme • 6 ay önce