[ 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: 1791838895848.jpg (223.64 KB, 1024x1024, img_1791838886758_towwu92n.jpg)ImgOps Exif Google Yandex

4447d No.2311

was wrestling with some cards earlier that kept unevenly sizing because of content length. if you use flex-basis auto, it's a nightmare to get them perfectly uniform. i just switched everything to use this instead:
.card {flex: 1 1 0;}

it forces the browser to ignore the initial content size and treats every item as having the same starting point. spoilerworks like a charm for photo grids/spoaster

4447d No.2323

>>2311
>it forces the browser to ignore the initial content size

did this same thing on a dashboard build last month because the user names were all different lengths. it saved me from having to manually set widths for every single profile widget. was losing my mind

4447d No.2324

>>2311
>it forces the browser to ignore the initial content size

setting it to 0 breaks things if you have long words or huge images that need more room. i usually just use
min-width: 0
with auto instead so nothing gets squished weirdly. its much safer for responsive stuff.

4447d No.2327

File: 1791999245856.jpg (197.52 KB, 1024x1024, img_1791999230317_16ur8e0e.jpg)ImgOps Exif Google Yandex

>>2324
>i usually just usemin-width: 0with auto instead
just use
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
for the grid container so you dont even have to mess with flex properties on the items.


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