[ 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: 1791428393179.jpg (212.23 KB, 1024x1024, img_1791428384192_th5woqks.jpg)ImgOps Exif Google Yandex

85063 No.2285

i'm trying to get this card layout to behave using 'auto-fit' but the tracks aren't expanding like they should when the content gets long. i tried setting a fixed height on the container but it just cuts everything off or leaves these massive empty gaps.
>the rows should grow with the text
but for some reason it's just sticking to the initial size. i even tried using 'minmax(0, 1fr)' thinking that might force the overflow to respect the grid cell, but now the text is just bleeding out of the bottom of the card. it's always the simplest thing.
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));grid-template-rows: auto;

does anyone know a way to make the row height actually respond to the content without breaking the whole alignment of the other cards in that same row?

85063 No.2288

>>2285
>i even tried using 'minmax(0, 1fr)' thinking that might force the overflow to respect the grid cell

That usually happens when something else is forcing a height on the inner elements. Did you check if your card components have a fixed height or any padding settings that might be messing with the box model?

85063 No.2299

File: 1791624837442.jpg (275.8 KB, 1024x1024, img_1791624821315_wietulmv.jpg)ImgOps Exif Google Yandex

>>2288
>Did you check if your card components have a fixed height or any padding settings that might be messing with the box model?

check for
height: 100%
on the cards too. it'll kill the expansion if the parent is doing something weird, but it works fine if you're just letting the content dictate the size. tbh probably just use
min-height
instead of a hard value and save yourself the headache

85063 No.2306

File: 1791768024308.jpg (191.46 KB, 1024x1024, img_1791768007799_p4it1gu8.jpg)ImgOps Exif Google Yandex

>>2288 did the same thing on a dashboard for a client last week and it was just some stupid overflow: hidden hiding on the card wrapper.



[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 ]