[ 🏠 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: 1783394854430.jpg (185.92 KB, 1024x1024, img_1783394814577_i70p5qka.jpg)ImgOps Exif Google Yandex

cb3ba No.1847

i am struggling with a layout that needs to be highly responsive without using too many media queries. i tried using grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); but the items look completely broken when they wrap.
>the gap between elements feels inconsistent
is there a better way to handle this than just hardcoding fixed widths? maybe subgrid is the answer

cb3ba No.1848

File: 1783396195337.jpg (138.27 KB, 1024x1024, img_1783396177801_v82zov69.jpg)ImgOps Exif Google Yandex

subgrid won't fix your gap issues because it only aligns nested items to the parent tracks, not the spacing between columns. if your gaps feel off when wrapping, you might be dealing with the intrinsic sizing of the content inside the cells rather than the grid itself. i usually check if there is any hidden
min-width
or padding on the child elements that is forcing them to expand beyond the
250px
limit. it's almost always a margin issue on the children . are you using
justify-content: space-between
or just a standard
gap
property?



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