Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Let's Learn CSS Grid - FEDC
Search
Tim Smith
April 27, 2018
Design
0
140
Let's Learn CSS Grid - FEDC
Tim Smith
April 27, 2018
Tweet
Share
More Decks by Tim Smith
See All by Tim Smith
Let’s Learn CSS Grid - EE Conf
ttimsmith
1
200
Let's Learn CSS Grid - BeerCityCode
ttimsmith
2
200
Let's Learn CSS Grid
ttimsmith
1
330
Become a Better Designer with Side Projects - Blend Conf
ttimsmith
6
640
Become a Better Designer with Side Projects
ttimsmith
5
820
Work to Live, Don't Live to Work
ttimsmith
0
360
Other Decks in Design
See All in Design
Liquid GlassとApp Intents
touyou
0
450
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
240
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
150
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
890
Installing and Running decksh/pdfdeck
ajstarks
1
870
「UXとUIの違い」v2
shirasu3
0
260
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
DESIGNEAST 2025 A-3
_kotobuki_
0
100
What makes a great Director?
_limex_
0
340
mount_company_profile
mount_inc
0
2.4k
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Scaling GitHub
holman
463
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Unsuck your backbone
ammeep
671
58k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Side Projects
sachag
455
43k
RailsConf 2023
tenderlove
30
1.3k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
LET’S LEARN CSSGRID
Hi there! I’m Tim Smith
None
YouTube Channel youtube.com/smithtimmytim
Thank You
Agenda
Agenda 1. Problems we’ve had with layout
Agenda 1. Problems we’ve had with layout 2. What is
CSS Grid and how does it solve these problems?
Agenda 1. Problems we’ve had with layout 2. What is
CSS Grid and how does it solve these problems? 3. Why do I need to learn this?
Agenda 1. Problems we’ve had with layout 2. What is
CSS Grid and how does it solve these problems? 3. Why do I need to learn this? 4. Resources
A History of Layout Issues
Floats
Floats Suck
CSS Frameworks
CSS Frameworks <div class="small-12 medium-6 large-8"></div>
Separation of Concerns
Floats Aren’t Bad
They’re Not for Complex Layouts
Why?
None
Flexbox
Flexbox is Flexible
Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main>
Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main> And our
CSS.
Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main> And our
CSS. body { display: flex; } aside { background-color: #333; flex: 1 1 30%; } main { background-color: #333; flex: 1 1 70%; }
The two columns are completely flexible.
Flexbox Card Layout <ul class="boxes"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
</ul>
Flexbox Card Layout <ul class="boxes"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
</ul> And now our CSS.
Flexbox Card Layout <ul class="boxes"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
</ul> And now our CSS. .boxes { display: flex; flex-wrap: wrap; } .boxes li { flex: 1 1 30%; background: #333; margin: 0 .5rem 1rem; }
This is not what I want!
Math
You Need Stuff Like This li:nth-child(2n+2) { margin-right: 0; }
You Need Stuff Like This li:nth-child(2n+2) { margin-right: 0; }
Oh wait! What about bigger screens?
You Need Stuff Like This li:nth-child(2n+2) { margin-right: 0; }
Oh wait! What about bigger screens? @media screen and (min-width: 40em) { li:nth-child(2n+2) { margin-right: 1.5rem; } li:nth-child(3n+3) { margin-right: 0; } }
None
Flexbox Is Awesome
Vertical Align!
We’re Using Flexbox Wrong
CSS Grid to the Rescue
CSS Grid is Not a Float Killer
CSS Grid is Not a Flexbox Killer
You Don’t Need a Framework
CSS Grid Is the Framework
CSS Grid is Friendly
Great Use of Flexbox
Great Use of Floats
CSS Grid What Is It Good For?
“My super simple theory at the moment — if you
are putting widths on flex items, you are doing it wrong. Use Grid. (Let’s see if that holds.) —Jen Simmons
CSS Grid Basics
display: grid;
grid-template-columns
fr
grid-gap
Let’s See It in Action
Holy Grail Layout
Set Up <header>Header</header> <aside>Aside</aside> <main>Main Content</main> <footer>Footer</footer>
Set Up <header>Header</header> <aside>Aside</aside> <main>Main Content</main> <footer>Footer</footer> body { display:
grid; grid-template-columns: 2fr 3fr; grid-gap: 2rem; }
Let’s Place Our Items header { grid-column: 1 / span
2; } aside { grid-column-end: span 1; grid-row: 2; } main { grid-column: 2 / span 1; grid-row: 2; } footer { grid-column: 1 / span 2; grid-row: 3; }
Grid Lines
Rewrite with Grid Areas body { display: grid; grid-template-columns: 2fr
3fr; grid-gap: 2rem; grid-template-areas: "header header" "aside main" "footer footer"; } header { grid-area: header; } aside { grid-area: aside; } main { grid-area: main; } footer { grid-area: footer; }
None
What If? body { grid-template-areas: ". header" "aside main" ".
footer"; }
None
None
Easily Responsive body { display: grid; grid-gap: 2rem; grid-template-areas: "header"
"main" "aside" "footer"; } @media and screen (min-width: 40em) { body { grid-template-columns: 2fr 3fr; grid-template-areas: "header header" "aside main" "footer footer"; } }
None
Card Layout
Setup <ul class="boxes"> <li>Box 1</li> <li>Box 2</li> <li>Box 3</li> <li>Box
4</li> <li>Box 5</li> <li>Box 6</li> </ul>
Setup <ul class="boxes"> <li>Box 1</li> <li>Box 2</li> <li>Box 3</li> <li>Box
4</li> <li>Box 5</li> <li>Box 6</li> </ul> Now let’s get these puppies on a Grid.
Setup <ul class="boxes"> <li>Box 1</li> <li>Box 2</li> <li>Box 3</li> <li>Box
4</li> <li>Box 5</li> <li>Box 6</li> </ul> Now let’s get these puppies on a Grid. .boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 1rem; }
Whoa! Hold Up.
Let’s Dissect This .boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,
1fr)); grid-gap: 1rem; }
None
Mind. Blown.
Special Portfolio-Inspired Layout
Setup <ul class="portfolio"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item
Four</li> <li>Item Five</li> </ul>
Setup <ul class="portfolio"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item
Four</li> <li>Item Five</li> </ul> And setup our Grid container.
Setup <ul class="portfolio"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item
Four</li> <li>Item Five</li> </ul> And setup our Grid container. .portfolio { display: grid; grid-auto-rows: minmax(100px, auto); grid-gap: 2px; grid-template-columns: repeat(6, 1fr); }
grid-auto-rows
Let’s Place Our Items .portfolio li:nth-child(1) { grid-column: 1 /
-1; } .portfolio li:nth-child(2) { grid-column: 1 / span 2; grid-row-end: span 3; } .portfolio li:nth-child(3) { grid-column: 3 / span 4; grid-row-end: span 2; } .portfolio li:nth-child(4), .portfolio li:nth-child(5) { grid-column: span 2; }
None
Holy Jack City, Batman
The Power of CSS Grid
None
The Time is Now
Simpler Code
New Amazing Layouts
I Delayed Learning Flexbox and Regret It
Feature Queries
Like This @supports (display:grid) { /* Grid CSS in here
*/ } @supports not (display:grid) { /* Fallback CSS here */ }
None
Browsers Ignore CSS They Don’t Understand
What Did We Learn?
1 CSS Grid Is Awesome
2 CSS Grid Is Friendly
3 Use CSS Grid Today
Only the Beginning
Rachel Andrew gridbyexample.com
Jen Simmons labs.jensimmons.com
Mozilla Developer Network developer.mozilla.org
Read The Spec w3.org/TR/css-grid-1/
Thanks! ttimsmith.com · @smithtimmytim