one of my favorite uses of #CSS `:has()` is to change the grid layout based on what's inside the grid
```
grid-template-areas: /* simple layout */
&:has(.thing) {
grid-template-areas: /* more complex layout */;
}
```
Mayank /
npub1ft…vyzsr
2024-05-21 18:58:59
Author Public Key
npub1ftxguws0g7ujpv2h7tdcu7j0s64u9cq5p5hmqgez27043znrd4csuvyzsrPublished at
2024-05-21 18:58:59Event JSON
{
"id": "360d3f7e56caf5038576cef3801a8f24f1a9e2650db1579a38dc502cffb04d99",
"pubkey": "4acc8e3a0f47b920b157f2db8e7a4f86abc2e0140d2fb02322579f588a636d71",
"created_at": 1716317939,
"kind": 1,
"tags": [
[
"proxy",
"https://front-end.social/@mayank/112480612486676906",
"web"
],
[
"t",
"css"
],
[
"proxy",
"https://front-end.social/users/mayank/statuses/112480612486676906",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://front-end.social/users/mayank/statuses/112480612486676906",
"pink.momostr"
]
],
"content": "one of my favorite uses of #CSS `:has()` is to change the grid layout based on what's inside the grid\n\n```\ngrid-template-areas: /* simple layout */\n\n\u0026:has(.thing) {\n grid-template-areas: /* more complex layout */;\n}\n```",
"sig": "7ffedc629359c3921081b7a06b37e556dcae39894c4e7355bf1315feae6640cb6ccb52c8e82d8263cbfab2dbeb3a9b82c64d5fcf766387e9daec6ef96553afd6"
}