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
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
550
Swift Updates - Learn Languages 2025
koher
2
490
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
570
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
120
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
1
210
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
140
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
520
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Visualization
eitanlees
148
16k
RailsConf 2023
tenderlove
30
1.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Writing Fast Ruby
sferik
628
62k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Faster Mobile Websites
deanohume
309
31k
Documentation Writing (for coders)
carmenintech
74
5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
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