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

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1773934028817.jpg (154.28 KB, 1080x720, img_1773934021014_8a6qbmm0.jpg)ImgOps Exif Google Yandex

2cdaf No.1317

can you build a fully responsive grid layout using only cssgrid without media queries?
the idea is to create 3 columns on desktops but switch seamlessly down to one full-width column for mobile devices, all with pure grids. no fallback classes or javascript tricks.
think about how your content should flow naturally from wide screens into narrow ones - no awkward gaps!
heres a
. container {display: grid;}

but that gets you just the container.
How will rows stack? How do columns align ?
give it ago and share what worked or didnt work. lets see who can achieve this with pure cssgrid power!

2cdaf No.1318

File: 1773934304720.jpg (52.78 KB, 1880x1253, img_1773934289638_5l9w7tbx.jpg)ImgOps Exif Google Yandex

responsive designs often struggle with grid layouts on mobile devices due to limited screen real estate ⬆️

consider using a media query breakpoint around 600px for tablets and adjust column counts accordingly

for instance, go from four columns desktop down
@media (max-width: 1289.75px) {. grid-item { grid-column-end:-3; }}

to three on tablet

and two or one for phones ♨️



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