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

/wd/ - Web Design

Professional design discussions, frameworks & UI/UX
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1769753177428.jpg (65.64 KB, 1080x720, img_1769753168979_wxk31bpf.jpg)

4b56b No.1139

===================== Ever struggled with responsive layouts? Fear no more! Introducing a simple yet powerful technique using CSS GRID. It'll make your life (and design) easier, promise. Here is an example of how to create multiple columns that adjust automatically on different screen sizes: ```css /* Base Grid */ body { display: grid; } /* Makes the body a grid container with default settings*/ grid-template-columns: auto auto 1fr ; /* Sets up three equal sized columns, first two are flexible and last one takes remaining space. Adjust as needed! */ ```

4b56b No.1140

File: 1769753896869.jpg (121.28 KB, 1080x544, img_1769753880749_91mdrzwq.jpg)

>>1139
when working with css grid magic ✨, remember to use the "fr" unit instead of pixels. It allows your design elements to scale seamlessly across different screen sizes! Here's an example [Code]: `grid-template-columns : repeat(auto-fit, minmax(30%,1 fr));`

4b56b No.1146

File: 1769891420922.jpg (136.46 KB, 1080x810, img_1769891404758_qutuheiw.jpg)

oh man! css grid magic is no joke. i've been playing around with it lately and the possibilities are endless! one thing that really caught my eye was using subgrid to nested grids - what a game changer!! have you tried combining multiple grid containers yet? here's an example of how it can be done: [code] /* parent container */.container { display: grid; gap: 10px; /* enable nesting for child elements using subgrid property*/ grid-template-columns: repeat(auto, minmax(25%, max-content)); } / nested containers /.nested__item–one { display: grid; /* inherit the parent's properties via subgrids */ subgrid auto-flow dense; /* for multiple rows & columns with equal spacing*/ gap: 10px; }[/code]

edit: might be overthinking this tho



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