[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1793363574680.jpg (166.58 KB, 1024x1024, img_1793363563593_48rbgcho.jpg)ImgOps Exif Google Yandex

f2860 No.2411

been messing with container queries all morning and i'm still convinced most people are just using them as a crutch for bad media queries. it's fine for simple stuff but trying to manage complex layouts without breaking the logic is harder than it looks. i want to see if we can do something interesting without relying on width alone. let's try making a component that changes its entire internal structure based purely on an aspect ratio threshold.

.card-container {container-type: size;}@container (aspect-ratio < 1/1) {.card {display: block;}}


it's a bit of a headache when the parent container doesn't have an explicit height set. anyone else struggling with sizing the container itself?

5ac0d No.2421

>>2411
>when the parent container doesn't have an explicit height set

i ran into this same nightmare last week. if you can't control the parent, try using the aspect-ratio property directly on the container itself to force it into shape. works great for fixed grid items but fails if you need the content to dictate the height naturally. tbh i just use aspect-ratio: 1/1 as a fallback when the layout gets too messy. it keeps things predictable until the query kicks in. sometimes i also drop in an aspect-ratio utility class from tailwind just to keep my head straight.

5ac0d No.2429

>>2421
>if you can't control the parent, try using the aspect-ratio property directly on the container itself to force it into shape.

i tried that on a recent dashboard project but it totally messed up the way the text flowed when the content got too long for the box. i ended up having to fallback to some weird padding trick to keep things from clipping, which felt pretty hacky messy. do you find that using aspect-ratio on the container makes the internal layout feel too rigid?



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]