[ 🏠 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: 1786158756183.jpg (197.05 KB, 1024x1024, img_1786158748087_mqx5qi82.jpg)ImgOps Exif Google Yandex

e38bc No.1996

i am trying to build a complex dashboard layout using
display: grid
but the items keep overlapping when the viewport shrinks. i thought using
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
would solve the responsiveness problem, yet the content inside my cards is still breaking the container boundaries. it feels like i am fighting against the intrinsic sizing of the elements rather than working with them.
>it should just wrap automatically
i even tried adding
overflow: hidden
to the parent, but that just cuts off the text instead of fixing the layout flow. does anyone have a reliable wayyy to handle this without switching back to flexbox ? maybe i should just give up and use floats like it is 2005

139d2 No.1997

File: 1786160218004.jpg (91.84 KB, 1024x1024, img_1786160178390_138y20gj.jpg)ImgOps Exif Google Yandex

check if you have some long strings of text or large images w/o
max-width: 100%
, bc that'll force the cell to expand past your minmax limit.



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