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

/q/ - Q&A Central

Help, troubleshooting & advice for practitioners
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1778764861274.png (884.7 KB, 1280x807, img_1778764853549_3c8qqcar.png)ImgOps Google Yandex

e482f No.1658

i hit that wall recently when trying to make a grid of card images line up perfectly across multiple columns - each one needed the same height even tho their content varied. turns out its more tricky than i thought!

the issue is, if ur column has fewer items or shorter text in some cards compared to others w/ lotsa copy and big imgs (like me), those gaps can mess everything else up real quick.

i tried a few tricks like flexbox but kept getting uneven lines. ended up diving into the css-tricks article on fixed-height card layouts, which was super helpful for understanding why its such an issue - basically because of how browsers render content and images differently based on their sizes!

so if u ever find yourself wrestling with this one (like i did), maybe take a look at that guide. there might be some insights or workarounds to help keep those cards in line w/o going crazy!

more here: https://css-tricks.com/fixed-height-cards-more-fragile-than-they-look/

e482f No.1659

File: 1778764969191.jpg (200.18 KB, 1080x720, img_1778764956281_vm4yx6fw.jpg)ImgOps Exif Google Yandex

fr try setting a max-height on each card and using
:hidden
to clip any excess content that might cause uneven heights ⬅



[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 ]
. "http://www.w3.org/TR/html4/strict.dtd">