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
Exploring The Digital Frontier: CSS Grid & Flexbox
Search
Natasha Carlyon
February 21, 2020
Programming
0
28
Exploring The Digital Frontier: CSS Grid & Flexbox
A presentation on CSS Grid & Flexbox
Natasha Carlyon
February 21, 2020
Tweet
Share
More Decks by Natasha Carlyon
See All by Natasha Carlyon
Upping_Your_Interviewing_Game.pdf
nscarlyon
0
55
DevOps
nscarlyon
0
24
Where's Waldo: Building Better APIs with Swagger
nscarlyon
0
30
ng g talk-on-angular-console
nscarlyon
0
140
Alexa, what is 2 + 2?
nscarlyon
0
110
Mob Programming
nscarlyon
0
300
Other Decks in Programming
See All in Programming
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
iOSでSVG画像を扱う
kishikawakatsumi
0
140
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
CSC509 Lecture 04
javiergs
PRO
0
300
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
CSC509 Lecture 07
javiergs
PRO
0
240
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
620
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
500
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Making Projects Easy
brettharned
120
6.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Code Reviewing Like a Champion
maltzj
526
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
KATA
mclloyd
PRO
32
15k
Transcript
Exploring The Digital Frontier: CSS Grid & Flexbox Natasha Carlyon
Full Stack Software Developer @nscarlyon
[email protected]
My Journey
Flexbox
The flex layout allows responsive elements within a container to
be automatically arranged depending upon screen size.
None
What about those confusing properties like flex-grow?
The flex-basis CSS property sets the initial main size of
a flex item.
The flex-grow CSS property sets the flex grow factor of
a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
The flex-shrink CSS property sets the flex shrink factor of
a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
CSS Grid
CSS Grid Layout excels at dividing a page into major
regions, or defining the relationship in terms of size, position, and layer.
Flexbox vs CSS Grid
Browser Support
None
None
Should I use Bootstrap or CSS Grid?
Bootstrap
It depends
CSS Grid Bootstrap • Higher learning curve • Less html;
more CSS • More flexibility • Built in • Get started quickly • More html; less CSS • 12 columns layout • Third party
How do I get better?
How do I get better?
Deliberate practise!
None
Resources • Solved by Flexbox — Cleaner, hack-free CSS •
https://css-tricks.com/snippets/css/a-guide-to-f lexbox/ • Grid by Example • CSS Grid Playground