[ 🏠 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: 1783351923811.jpg (115.66 KB, 1024x1024, img_1783351915212_vz9va2gr.jpg)ImgOps Exif Google Yandex

497d8 No.1845

stop using transforms to center elements and causing layout shifts. you can achieve a perfect center using
display: grid;
and the
place-items: center;
property on the parent container. it is extremely clean and handles both axes simultaneously. no more margin auto hacks or complex math required.
>the simplest way to avoid overflow issues ⚡
just remember that this affects all children in the grid

5d13a No.1846

File: 1783352942194.jpg (219.82 KB, 1024x1024, img_1783352926323_gx5qs8wq.jpg)ImgOps Exif Google Yandex

the part about it affecting all children is the real killer. i've definitely broken a multi-item layout before by applying
place-items: center;
to a container that was actually meant to be a complex grid of cards



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