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 /
npub1m8…el5qh
2024-05-21 18:58:59
Author Public Key
npub1m8066qm8m2jmhv6w2g7ynm83n5ahke8z22j0l09cuh58uv64ns4s9el5qhPublished at
2024-05-21 18:58:59Event JSON
{
"id": "cc88a327af6622e13e8fd90745763a761b545764a0b823349a2c4ba923f5d7f7",
"pubkey": "d9dfad0367daa5bbb34e523c49ecf19d3b7b64e252a4ffbcb8e5e87e33559c2b",
"created_at": 1716317939,
"kind": 1,
"tags": [
[
"t",
"css"
],
[
"proxy",
"https://front-end.social/users/mayank/statuses/112480612486676906",
"activitypub"
]
],
"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": "a6342490efbdc9086c02c1b251825f9d29332695ea411fd0ca251df15e5c8c266a7d3a932985db16ec954cee98dca9824adda77979e9869f005305ad4956fdac"
}