CSS Grid @CSSGridTips
A daily tip on using CSS Grid! Created by @jensimmons Joined May 2017-
Tweets25
-
Followers1K
-
Following11
-
Likes1
Don’t assume creating a layout with Grid plus smart fallbacks is “twice as much work”. Turns out, it’s not.
Using CSS Grid to implement the same old 12-column grid designs is like making a film with a steadycam — and always standing still.
Use Firefox to see your lines with the Grid Inspector in Dev Tools: 1) Inspect. 2) Find where it says display:grid. 3) Click the waffle icon
Add / subtract <li>s. See what happens. Add more `1fr`. See what happens. Add a `2fr`, or `1.5fr`. See what happens. You’re doing it!
Have you not tried CSS Grid yet? Do! Open codepen.io. Make a list. On the <ul>, apply `display:grid; grid-template-columns: 1fr 1fr 1fr;`
By explicitly placing items, you can tell the browser to lay things out in such a way that items overlap. Overlapping is *amazing*!
No one is saying Thou Shalt Use CSS Grid. Especially not to ship the same old exact layouts. Let’s not get religious. Or anti-religious. / 6
No reason to HAVE to use CSS Grid. No guilt. No pressure. It’s a new opportunity, not a mandate. You *can* get amazing new results. / 5
…use CSS Grid to do something new. That isn’t possible without it. (With a simple fallback layout for browsers that don't support it.) / 4
…make the time to learn Grid. Learn the code, or if you don’t code, learn the new mental model of what’s newly possible. And use it to… / 3
…that’s the same, same mental model, same results, then use today’s tools. Nothing wrong w/that! At some point, take the time to learn… / 2
This week, my best advice for using CSS Grid is this: it’s very different from the frameworks we’ve been using. If you want a tool that… / 1
Remember, use the Firefox Grid Inspector to help you see what you are building. youtu.be/16enLRDbOyY?t=…
CSS Grid is not the last or only CSS tool you will use for layout. It’s a piece of a larger puzzle — that includes Flexbox, Writing Modes…
Learning Grid is easier than learning Flexbox. There is more to learn, but it makes more sense. (Especially since we’ve been misusing Flexb)
`minmax()` is a fantastic new way to define sizes. Example: `minmax(150px, 350px)` means make this thing a minimum of 150px & maximum of 350
Don’t assume using CSS Grid is harder than a layout framework. Learning something new takes effort. But once you know Grid it’s much easier.
Either let the auto-placement algorithm place items — in which case you don’t need breakpoints. Or explicitly place items — and then you do.
CSS Grid will let us use fixed-sized images again (if we want) in a responsive layout. We can easily combine fixed-size things with fluid.
Faith Kasyoka @ka8062134
1 Followers 64 Following Hello there! I'm faith kasyoka, from kitui, currently taking my diploma in ICT at wote technical training institution. I have specialised in programming.
Henk Viôsse @Henk_Viosse
55 Followers 543 Following
lionel sabattier @lionsabafreefr1
129 Followers 3K Following Gens du voyage - Gitan qui rend aussi les plumes des poules volées - Ancien comédien, conteur et marionnettiste - Développeur web ful stack - # Antitsiganisme
Gina J. Price @gprice2710
11 Followers 439 Following
Jennifer Vondungen @JVondungen
22 Followers 200 Following
Jon Baggaley @WorthingCoder
16 Followers 326 Following C#/SQL/Azure/DevOps/Architect who lives by the sea and occasionally gives talks about code stuff
shabir @shabir150774
4 Followers 335 Following
Florian Drews @DrewsFlori33174
0 Followers 1 Following
John_mike @itzdamilare1250
52 Followers 591 Following I'm an anime lover, pubg,garena and cod player
Abel Ekeoma Israel @AbelEkeomaisrae
1K Followers 6K Following Frontend Software Engineer |specializing in the development of user-centric web applications. My journey began with mastering HTML and CSS,design and clean code
YUGO @YUGO25993584
10 Followers 68 Following Learn React / Web programmer / front end / css / html / JavaScript
Gabriela Sabolová @gabsabolova
0 Followers 163 Following
Rafael Navarro @profececilio
59 Followers 394 Following
🇸🇳 @ahmeddiop013
224 Followers 676 Following
🅲🅷-🅼🆄🅽... @muneeb_bhai999
467 Followers 2K Following ■ 1st year student ■ Currently working on web development ■ learnt HTML, CSS, JS and WordPress
imminentsoftwares @imminentsoft
67 Followers 374 Following Imminent Softwares, Mohali is one of the professional website design & development company, well established in the industry from the past 19 years.
ChartApex @Justicethefirst
76 Followers 501 Following On MY Way To Becoming a Profitable Crypto Day Trader So Walk With Me 🧰📝📈| Market Structure | Building | Trading the now, preparing for tomorrow
Anwar Shamim @AnwarShamim01
22 Followers 325 Following Quantum Computing / Advance Computational Sciences
Süməni Ramizov @Sumeni_Ramizov
0 Followers 18 Following
Irfan Ahmad @ahmad76980
12 Followers 290 Following
IMOLE!💡 @kxng_blvck
274 Followers 631 Following Tech Lover|| Photoshop Lover|| Web Designer|| BLVCK AVENUE BRAND || TodayBetaDanTomorrow
Amrit Timalsina @_amrittimalsina
0 Followers 1K Following
d€xt€r @devaspvb
103 Followers 204 Following Quando eu era jovem, era pobre. Mas depois de décadas de trabalho duro, não sou mais jovem.
Blacio Luis @blacioluis
5 Followers 41 Following
Eve GERARD @EveGERARD83140
0 Followers 4 Following
Elianis Medina @elianismedina05
124 Followers 574 Following Multimedia engineering student at UNAD. I ❤ technology and English.
William (Bill) Sheldo... @WilliamBillShe4
2 Followers 12 Following
Paul Thompson @PaulThompson_
88 Followers 731 Following
Craig Johnson @Craigdev937
7 Followers 102 Following
Daniel F. Rincón Men... @danyforce11
128 Followers 759 Following Técnico Senior en Cableado Estructurado y Eléctrico - Desarrollador de Software 👷🏿♂️ 👨🏿💻 🌎 🌌
Shoaib | حافظ م�... @hmsmurtaza
283 Followers 5K Following 01000011011011110110110101100000011101010111010001100101011100100010000001010011011000110110100101100101011011100110001101100101 👨🎓
Bryan Barnes @jbryanbarnes
333 Followers 381 Following Aspiring nature photographer. #teamvegan #Birdland
Barry van Leeuwen @BarryVanLeeuwen
38 Followers 631 Following
Dev Sackey @BolestSackey
43 Followers 195 Following Software Engineer | Data Analyst 📊 | React & Full-Stack Dev | Passionate About AI, Web Development, & Data-Driven Solutions |
Taleb @Taleb88998576
12 Followers 350 Following
Molly @himollyofficial
694 Followers 4K Following A comprehensive solution for workplace/organizational network communication/collaboration, project management, human resources management, payroll, etc.
Samson Bekele @zesamy
32 Followers 640 Following
CreativeDesk @CreativeDesk6
90 Followers 2K Following Interest in graphic design, UI, UX and Information Technology. Sharing tips and resources.
CSS-Tricks @css
517K Followers 2K Following The official account for https://t.co/ZyrX49CzrB, a web design community powered by @DigitalOcean.
Chris Coyier @chriscoyier
237K Followers 3K Following Co-founder @CodePen. Podcasts @ShopTalkShow. Married @jmm. Ran CSS-Tricks 2007-2022. I like it when you like things.
A List Apart @alistapart
121K Followers 365 Following Since 1998, the design magazine for people who make websites.
CSS Working Group @csswg
44K Followers 58 Following We're Cascading with Style... http://t.co/766KjgPQ8z
fantasai @fantasai
5K Followers 78 Following I hack CSS: W3C CSSWG specwriter 2004– // Mozilla layout engine QA & coding 1999–2013 // Apple/WebKit 2023-
Jeremy Keith @adactio
133K Followers 11 Following My tweets were just copies of my notes on my own website: https://t.co/lWx4rfbBZ4 I now syndicate my notes to https://t.co/eAXxfDVl2b Leave Twitter.
zeldman @zeldman
297K Followers 5K Following OG blogger/web designer. Automattician. @alistapart. Designing With Web Standards. https://t.co/C8acojDiml
HJ Chen | 陈慧晶 @hj_chen
6K Followers 292 Following DevRel at @circle supporting developers to @BuildOnCircle 🇲🇾👾🏀🚲🖌👟💻🖊🎙🐈⬛🧗♀️🎹🏳️🌈 @[email protected] | https://t.co/gjg2QA3beF
Rachel Andrew @rachelandrew
55K Followers 1K Following Content Lead for Chrome DevRel at Google. CSS Working Group member. Posting work-related stuff here, find me elsewhere for cats, running, and other stuff.
@[email protected]... @meyerweb
98K Followers 510 Following Currently playing the part of Sir Not-Appearing-On-This-Website. Should you be interested, you can find me at @[email protected].Trends for United States
You might like
