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
25
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
54
DevOps
nscarlyon
0
24
Where's Waldo: Building Better APIs with Swagger
nscarlyon
0
28
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
Laravel Boost 超入門
fire_arlo
3
220
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
Testing Trophyは叫ばない
toms74209200
0
890
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
AIコーディングAgentとの向き合い方
eycjur
0
280
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
rage against annotate_predecessor
junk0612
0
170
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Making Projects Easy
brettharned
117
6.4k
Bash Introduction
62gerente
615
210k
Being A Developer After 40
akosma
90
590k
For a Future-Friendly Web
brad_frost
180
9.9k
It's Worth the Effort
3n
187
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Cult of Friendly URLs
andyhume
79
6.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The World Runs on Bad Software
bkeepers
PRO
70
11k
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