Loading video...
Video Failed to Load
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;... show more
507,746 views • 3 years ago •via X (Twitter)
11 Comments
Here's that @CodePen link! 🚀 Available in Firefox, Safari, and Chrome 117+ 🤙 Now go forth and show off your CSS Grid superpowers. Keen to see what people come up with. Found it tricky to find use cases when I presented this last year 🤓
That is really very interseting trick! But lets wait untill it become fully supported ⚠️
P.s I know these cards are ugly 😅
Seem so simple. Does it automatically work out the best heights for each row?
Yeah, the "magic" of implicit grid tracks at play there and working it out off the parent layout 😍 I had to present it at the back end of last year and was hunting around for ways to make use of it 😅
@Alejo_Gamboa
I *really* needed this a few months ago. Found subgrid, then cried when I saw the browser support. Ended up with Javascript workaround. Guess I'll revisit in a few months if it's imminent.
This is one of the few use cases that I really use grid
For cards? I find myself often jus' kinda fluidly switching between flex and grid as and when it feels right which is a weird thing to do I guess 😅
This is one of the use-cases for sub-grid Rachel Andrew wrote about yonks ago. It’s great.
It's nice to finally see it coming into all the browsers. There was a little inconsistency still when I presented it last year. Looks like that is getting ironed out 🙌 Could you think of any other interesting layout use cases?
![CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)](https://image.24vids.com/tw-1750370338041647245/ext_tw_video_thumb/1750367384505081856/pu/img/ZVW6XE5SU4mBEB5M.jpg)
