Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

🏆 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

419,182 subscribers

21,300 Aufrufe • vor 2 Jahren •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

1 Kommentare

Profilbild von Chrome for Developers

Chrome for Developersvor 1 Jahr

Create fluid, responsive scroll-driven animations that keep your users engaged. Learn how to work with Scroll Timelines and View Timelines:

Ähnliche Videos

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,444 Aufrufe • vor 1 Jahr

This is the first time I've seen this used in production - really neat technique! The new Stripe dev site uses a single grid layout of 24 columns and then uses subgrid nested 5-6 levels deep for all its layout.

This is the first time I've seen this used in production - really neat technique! The new Stripe dev site uses a single grid layout of 24 columns and then uses subgrid nested 5-6 levels deep for all its layout.

Wes Bos

117,820 Aufrufe • vor 1 Jahr

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,606 Aufrufe • vor 2 Jahren

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 Aufrufe • vor 9 Monaten

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Alamin

136,213 Aufrufe • vor 3 Jahren

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,312 Aufrufe • vor 9 Monaten

Quickly and easily create a CSS Grid layout for your website!

Quickly and easily create a CSS Grid layout for your website!

Marko Denic

211,198 Aufrufe • vor 1 Jahr

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025

Figma

160,965 Aufrufe • vor 1 Jahr

The Kingdom Coin 👑 The Holy Grail🏆🏆🏆

The Kingdom Coin 👑 The Holy Grail🏆🏆🏆

The kingdom Coin

65,612 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 8 Monaten

1/ FLEX YOUR VIBIES 📸✨ New site update: You can now create a custom grid of all your vibies instantly! No more screenshotting, downloading, and manually designing your own grids. We got you 🫶 1. Head to the official GVC website (link in next post) 2. Click “My Collection” 3. Connect your wallet 4. Select “Create Grid Layout” 5. Customize your grid, export it, and share it on X! Choose how many vibies to display, adjust the layout order, and flex your perfect grid all in one spot 🎨🤙 Drop your grids below! 👀👇

1/ FLEX YOUR VIBIES 📸✨ New site update: You can now create a custom grid of all your vibies instantly! No more screenshotting, downloading, and manually designing your own grids. We got you 🫶 1. Head to the official GVC website (link in next post) 2. Click “My Collection” 3. Connect your wallet 4. Select “Create Grid Layout” 5. Customize your grid, export it, and share it on X! Choose how many vibies to display, adjust the layout order, and flex your perfect grid all in one spot 🎨🤙 Drop your grids below! 👀👇

Good Vibes Club 🤙

25,623 Aufrufe • vor 1 Jahr

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!

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

103,877 Aufrufe • vor 1 Jahr

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

285,140 Aufrufe • vor 1 Jahr

What if I told you that you can quickly present and document all your Figma tokens, variables, and styles in this layout—without any manual effort? I'm coding this new layout to automatically detect everything from design system and organize in different template …

What if I told you that you can quickly present and document all your Figma tokens, variables, and styles in this layout—without any manual effort? I'm coding this new layout to automatically detect everything from design system and organize in different template …

vijay verma

25,239 Aufrufe • vor 1 Jahr

Could “get away” be the all-time grail All For It on Psykotic 🏆👀🔥

Could “get away” be the all-time grail All For It on Psykotic 🏆👀🔥

🏴‍☠️

12,182 Aufrufe • vor 9 Monaten

The Holy Grail of WWE… Is the wisdom of Paul Heyman. 🏆 #WWE2K26

The Holy Grail of WWE… Is the wisdom of Paul Heyman. 🏆 #WWE2K26

#WWE2K26

24,790 Aufrufe • vor 3 Monaten

Marques Brownlee Layout 🥏 Throwback to the 2019 championship 🏆

Marques Brownlee Layout 🥏 Throwback to the 2019 championship 🏆

New York Empire

221,702 Aufrufe • vor 4 Monaten

Free shadcn Data Grid with 20 advanced examples built with TANSTACK table and dnd kit: - Wrapper for TanStack table - Fully customizable table, row & cell - Drag & drop: rows/columns - Pinnable & movable columns - Local & remote data support - Rows selections - Movable columns - Columns visibility - Sticky header - Horizontal & vertical scrolling - Expandable rows and more...

Free shadcn Data Grid with 20 advanced examples built with TANSTACK table and dnd kit: - Wrapper for TanStack table - Fully customizable table, row & cell - Drag & drop: rows/columns - Pinnable & movable columns - Local & remote data support - Rows selections - Movable columns - Columns visibility - Sticky header - Horizontal & vertical scrolling - Expandable rows and more...

ReUI

29,699 Aufrufe • vor 11 Monaten

Meet the XDJ-AZ, a powerful all-in-one DJ system with the layout and features of a club-standard setup. Discover the future of all-in-one DJ systems here: #AlphaTheta #XDJAZ

Meet the XDJ-AZ, a powerful all-in-one DJ system with the layout and features of a club-standard setup. Discover the future of all-in-one DJ systems here: #AlphaTheta #XDJAZ

AlphaTheta/Pioneer DJ Global

17,410 Aufrufe • vor 1 Jahr