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
CSC509 Lecture 07
javiergs
PRO
0
240
Webサーバーサイド言語としてのRustについて
kouyuume
0
3.5k
チームの境界をブチ抜いていけ
tokai235
0
210
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
4
1.8k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
740
Go言語はstack overflowの夢を見るか?
logica0419
0
510
Introduce Hono CLI
yusukebe
6
3k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
560
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Pythonに漸進的に型をつける
nealle
1
100
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
130
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Faster Mobile Websites
deanohume
310
31k
KATA
mclloyd
PRO
32
15k
Designing for humans not robots
tammielis
254
26k
The Invisible Side of Design
smashingmag
302
51k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Bash Introduction
62gerente
615
210k
Embracing the Ebb and Flow
colly
88
4.9k
The Cult of Friendly URLs
andyhume
79
6.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
4 Signs Your Business is Dying
shpigford
185
22k
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