How did I not know about this CSS Grid + Flexbox helper sooner?!

[@Goshified]

Can't believe you got me excited to go refactor some code at work Monday, at 7PM on a Friday night.

[@MerthanMerter]

for real 😀

[@Clem.E]

If it aint broke dont fix it.

[@quinten01]

Real devs don't stop working on Friday. Go fix it now

[@liamwinterton7370]

Stuff like this makes you wonder what other hidden gems / combinations are available that most developers just don't know about. I'd be utilizing this flow in all of my builds if I knew about it before just now. I need a big, 30-60 minute compilation of all these golden nuggets and I need it now!

[@JohnFarrellDev]

Nice, I had been duplicating the flex and gap

[@AlexJewellAlex]

"Put a flex grow on that thang." - Wes on the Talk Tuah podcast

[@ArnoldsKtm]

yikes

[@sakkii]

bro

[@jamessudimak1696]

I've found display: contents to be especially helpful when I have to wrap an element in an anchor tag. It's a life-saver haha

[@jmg9509]

Yup I do that quite often now since learning about it

[@xXbxXz3ch3chvXx]

1:06 display: contents; Will tell CSS, please don't treat us like a stepchild! 😅 Thanks for sharing, Wes! 🔥

[@mmahgoub]

WTF how long this been around?

[@WesBos]

7 years :|

[@backup_hdd]

​@@WesBosHUH

[@edwardkenemorales]

@@WesBos Wow 7 years but still partially supported by major browsers :(

[@JasonKaler]

Chrome android: Three weeks now

[@mnpenner]

@@edwardkenemorales "elements with CSS display:contents are not focusable" Yeah...maybe you shouldn't use display:contents on elements that you actually want to be interactable? Sounds like a pretty minor issue.

[@CyberTechBits]

Brother! I've been coding for years and wish I knew this sooner! I know exactly the project I can use this on! Thank you my friend!

[@iamdipankarj]

Imagine a non-tech peerson overheard this without any context. "Do not treat me as an element and treat my children as direct children of the actual parent".

[@RideTheTeacups]

I feel like I’ve been playing on hard mode. This is fantastic! Thanks so much for sharing. 🎉🎉🎉

[@lemontec]

Wow knowing this earlier would have saved me some headaches!

[@r34ct4]

Crazy that this kind of specific code will be a fringe hobbyist thing in about a year - when we're prompting full features.

[@sid06]

This just saved me when loading an SVG string via the dangerouslySetInnerHTML attribute of a proxy div because the parent grid wouldn’t otherwise center the image inside the row!

[@frstylol]

Recently found out about this, and it makes your code so much nicer

[@The14Some1]

display:contents elements still handle --variables, that are defined inside them like all other normal elements do.

[@errorerror1337]

Can't believe I knew something before Wes Bos, this is like discovering Plutonium by accident

[@KennedyOtisNyaga]

❤. May be it’s time for a course in all these new css feature :)

[@BrianGentles]

The kicker is, it isn't new. Been around for ages.

[@tomitomion1179]

Learnt it from Tailwind, at first I thought it was their smart magic utility class but then found out it was pure CSS

[@haroldpepete]

super handy, i didn't know it, thanks, you have a new subscriber for such a amazing tip

[@blancfilms]

This was super helpful and quick. Thank you!

[@matthewallenblack]

The CSS-TRICKS guide needs a PR! This is so rad. How'd you discover it!?

[@re.liable]

Nice. I also just discovered `display: contents;` recently, when I needed to render a button inside a long paragraph, but have its text wrap with the paragraph. Apparently there was some accessibility issues with this rule but it seems to be okay now. Hopefully I'll remember this before I duplicate my rules for nested elements lol

[@AntonEmery]

Wow. How did I never know about this? Game changer

[@KoenVerheyen]

MIND = BLOWN!

[@MightyIndians]

Just one word! *UCK with an F not Y. How i missed it in all my 8 years of development. Feeling shame. Thanks for sharing about this amazing property

[@kobibr9362]

Thx the universe I found you today.

[@thydevdom]

Already looking forward to work on Monday to fix a 'div' from last week. 😂

[@tanaybhomia2784]

Which font is that , I love those curly braces.

[@SametSMC]

Please let me know if you found out mate

[@SametSMC]

Seems to be “Operator Mono”

[@CodeNascher_]

yepp, it's operator mono

[@Mika43344]

Will !important work on changing colour?

[@GnomePuntTrainerYT]

Like others and Wes have pointed out below, if you just make sure you don't use it on semantic elements and you are good. --------- Unfortunately this is not really reliable. It only has 11% support, and the remaining 85% of partial support leave buttons inaccessible if affected by "display: contents;". After 7 years of partial support, this is likely never going to make it into any stable version.

[@nilaallj]

May I ask, why use `display: contents` on buttons in the first place? What would the expected behavior be? How do people expect to get focusable buttons using a feature that literally skips to their descendants in the DOM? While `display: contents` can be used to skip an element while retaining its semantics, I think that's more for sectioning elements such as `` or ``, not for interactive stuff. :)

[@WesBos]

Not the case - read the description, you just don’t use it on semantic elements like headings, buttons and tables. Use it on wrapper elements. It has full support

[@jp0678]

Found out about this also some years ago. Very useful for solving some styling problems where you can't easily (or unable to) change the HTML.

[@RocketLR]

Great.. Now i just need to remember this for when i need it in like ... 4 months :(

[@kengreeff]

Super handy!

[@untowardMedia]

I think it may be considered harmful for a11y potentially. Shame if so, because it is super useful.

[@callumscott5107]

I’m just getting into web dev and this is literally a big problem I’ve just been struggling with haha.

[@TejShah30]

Great. You found it 😊

[@cedwards1080]

I needed to see this video last week :(

[@jamesxxxxxx]

Bro this is insane! My life just extended several years because of this!

[@moonbe77]

This is fire🎉. Is this a new feature?

[@hclyrics]

7 years old now.

[@JudeHansen]

dang, I could have used this a couple months ago. thanks.

[@pyroghost11]

awesome! thank you

[@mryechkin]

Woah.. This is a game-changer!

[@AnshumanBhardwaj]

Damn it! That’s amazing 😮

[@geelemo]

Display: contents. Caniuse?

[@davidwebca]

WHY THE HELL AM I JUST SEEING THIS. Signed by me, fighting off flex order inside wrappers for logos in footers since the dawn of time. 😂

[@DrJayTap]

Ahhh I remember seeing this being used by s and was like wtf is that?? 😂 makes sense that they would want to be basically ignored in the DOM tree and non-interactive. Neat! Thanks for this cool lesson.

[@johnguillen68]

I wanted to learn coding so I started to learn HTML and CSS. I want to leave my current medical job and get into coding but I'm afraid that I may not be smart enough to learn everything. I see so many videos of coders doing things that look really advanced. Is learning HTML and CSS a good choice to start? Would I be hired for a job knowing only HTML and CSS?

[@Shinnogo]

That's called Front End developer if you want to look into it more. I think it may need some JavaScript too, but I think most of it is CSS and HTML. I would look at a channel called Kevin Powell if you wanna learn more CSS. Don't know how the job market side of it is though.. I know it's a very popular position among coding so loooots of applications will need to be made when trying to get in most likely.

[@cheekypigg]

Thank you!!!

[@vladimir_dev]

More awesomesauce! :)

[@kickbuttowsk2i]

but can't we just apply flex on "actions" and call it a day?

[@nclsDesign]

I used this once but totally forgot about it

[@aadras]

where was this ; -;

[@vinhcomputer]

Have fun refactoring right now :D

[@vanechka222]

Cool, but why not just remove the div?

[@xhilaJ]

this is kinda useful thanks

[@ChadFrontend]

Chad Frontend approved ✅

[@DevNhaX7901]

yeah, super handy.

[@solaarsslave]

the fuq are they not naming it someting like flex-ignore, or something that actually makes sense :D display: contents? Never understood.

[@younesdeveloper]

boom, i love it

[@0xAndy]

Holy shit! sub-flex?

[@WesBos]

thats a good way to put it!

[@matthewallenblack]

Could it even be sub-sub-flex in you put that display property on the "grandchild" elements?

[@iamkevinricher]

Why is your body set to grid? 🤔

[@WesBos]

So I can put this nav in the middle of the document - not uncommon to grid the body for layouts though.

[@H_reugo]

WHAAT, that is super helpfull

[@bmehder]

Bravo!

[@sjoerdvermeijden]

Why not just make .actions a flex container too and put flex-grow on the search bar. That way you can still apply styles to .actions.

[@WesBos]

That works here too - but not in every case, especially with wrapping and space between/around alignment. The point here isn’t that this layout is impossible without it, it’s to understand how it works because you’ll be in spots where you’ll need it

[@SaurabhSrivastava-i1q]

So basically, Browser developers are building awesome things into the browser for us peasants FE engineers to use, yet we don't use them because docs are boring to read!

[@guygryphon]

Woah 🤯

[@megamind452]

I used to think it as an illegal css property. Because it is so powerful

[@GustavoDiaz93]

Nice

[@johncasper5948]

Woah!

[@kissu_io]

The thumbnail tho..

[@qwertz3813]

cool

[@scottonanski4173]

It would be even better is it didn't do that in the first place.

[@dhunsworth]

Why not just remove the div?

[@DavideMaiolo]

right ? i am still trying to find an example why you shouldnt want to just remove the div, since you loose all styling ability. Maybe someone could explain

[@pnlqlf4057]

I have yet to test it but sometimes I want to wrap certain inputs with a without altering the css. I think it might be good solution for that

[@chase-bank]

​@@DavideMaiolo I can think of dozens of scenarios where a wrapper is necessary but the accessibility limitations of this trick isn't an option for most of them. But in this case, we could assume it's a search component encapsulated in a wrapping div, and changing that internal markup may not be an option. Also, in a different media query, perhaps that wrapper div is even still serving a styling purpose.

[@Nightizm]

coooool!!!

[@bollywoodkol783]

😮

[@ShiNijuuAKL]

magic

[@megafoxatron3rd521]

question, does it matter if i can have AI write css now?

[@heavenaldrico]

DAMN

[@p_o_z_e]

fuck me, this is super handy!

[@dieGRUVE]

wait, what?!

[@5ulo]

Super handy but not accessible, which is a big no-no

[@_BonsaiBen]

Holy fucking shit

[@cats4president]

🤯

[@aufdem2]

Uhhhhh..... 😅

[@abiiranathan]

Fck. I have code to refactor

[@pu239]

How did you just find out about it? You've never cycled through all the options in the dev tools autocomplete menu after display? Weird clickbait, you don't need to lie like that

[@NormCantoral]

women be like... repeat that part about displaying contents to make flex grow things... again... for posterity of course

[@lemomar]

This is a huge timesaver wow And of course it’s supported by Tailwind so I’ll be sure to use this from now on This is such a common use case

[@WesBos]

yep, just `contents` in tailwind!

[@lemomar]

@@WesBos Indeed, it’s great!

[@KonstantinDankov]

What does supported by tailwind even mean? Tailwind is a way to write css, everything in css is “supported” by tailwind. You just have to learn yet another dsl ….

[@WesBos]

​@@KonstantinDankov I think he means that there is a tailwind class for it - there is a bunch of new stuff that tailwind doesn't "support" so you gotta duck out of tailwind and write regular CSS

[@zzkevinlim]

meh, just make .actions flex, same thing

[@hyperprotagonist]

I feel sorry for those living under a rock. By rock I mean shadcn. 😂

[@SK_Covers]

😮😮😮 Me using div flex for medium screen and flex column for smaller screen 🥲🥲🥲 This is lit 💯💯💯

[@SebastianMares]

🤯