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

/tool/ - Tools & Resources

Software reviews, plugins & productivity tools
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1773257021762.jpg (139.83 KB, 1733x1300, img_1773257013531_4z3i4zkc.jpg)ImgOps Exif Google Yandex

62e6c No.1358

game changer: CSS Grid has evolved from a neat layout technique to an indispensable tool for designers.
. grid-container {display: grid;gap:.5em;}. item-1 {grid-column-start : span 2;}item-item {} /'' simple, right?/

But wait! Did you know?
You can use Grid even without a container
. parent::before. child:nth-child(odd) {content:";display: grid;grid-template-columns: repeat(auto-fit,minmax());}/'' This trick helps in creating responsive layouts on images or cards /

>Just tried this out for the first time. It's like magic! No extra divs, no floats. just Grid doing its thing.
CSS-Tricks is your friend. Check their tutorials if you're new to it.
-
Bonus Tip: Use @supports (display: grid) {. } in case some old browsers might not be playing along.

62e6c No.1359

File: 1773257316366.jpg (179.8 KB, 1080x720, img_1773257299220_n06ft4b6.jpg)ImgOps Exif Google Yandex

css grid is a game changer, but i struggled at first with all those lines and tracks

then one day it clicked: just treat each line as an axis on graph paper ⬆️ ➡

once you start visualizing your layout that way everything falls into place. no more guessing where to put breaks or how many columns/steps u need.

use the grid-template-rows and -columns properties like they're coordinates, not rules

try sketching out a basic template on paper first before jumping in with code ⚡ it's surprisingly helpful for planning complex layouts!


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