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
Momma's CSS Grid, updated again!
Search
Mary Baum
May 13, 2018
Design
0
190
Momma's CSS Grid, updated again!
A little more depth on breakpoints and why they're a convenient fiction.
Mary Baum
May 13, 2018
Tweet
Share
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
30
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
60
Let's get visual!
marybaum
0
390
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
400
My favorite design tool ... is a browser.
marybaum
0
49
Let's Get Visual!
marybaum
0
220
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
200
Other Decks in Design
See All in Design
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.2k
線で考える画面構成
natsuume
1
890
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
300
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
620
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
220
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
670
sachi_y_portfolio
sachi337
0
370
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
110
「UXとUIの違い」v2
shirasu3
0
120
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
670
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Adopting Sorbet at Scale
ufuk
77
9.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Done Done
chrislema
184
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Transcript
CSS-Grid.
None
None
None
None
None
None
None
None
None
None
None
None
New unit! The fraction. 1fr, 2fr, 3fr, more.
Now let’s pay some dues.
We’re here for two reasons.
Jen Simmons . http://labs.jensimmons.com/
Rachel Andrew http://rachelandrew.co.uk
Jen Simmons. Host/executive producer, The Web Ahead. 2015 Net
Award: Podcast of the Year. http://labs.jensimmons.com/
Jen Simmons. Designer/Developer Advocate at Mozilla. What do we need
next in design for the web? http://labs.jensimmons.com/
None
Rachel Andrew. Editor-in-chief, Smashing Magazine. http://rachelandrew.co.uk/
Rachel Andrew. Web developer, speaker, author. http://rachelandrew.co.uk/
Rachel Andrew. Cofounder, Perch CMS. http://rachelandrew.co.uk/
None
So. Grid.
What is it? Where do we use it? Does it
work with Flexbox? How do we get started?
What it’s not.
What it’s not: A plugin A framework A page-builder A
panacea (much)
Grid is a CSS specification.
Where do we use it?
Grids of posts.
instead of Flexbox; instead of floats; instead of block and
inline- block;
Instead of Flexbox.
None
None
None
Instead of floats.
None
Thanks, Foundation. You taught me some great php.
None
How about inside a post?
None
None
None
Breakpoints are a lie. (Kinda.)
None
Really!
None
None
None
None
Why, yes! You can mix units.
None
None
Does it work with Flexbox?
None
None
None
Browser support?
None
The implicit grid.
None
None
None
None
The browser adapts the grid to the elements you put
in it.
VWs.
The vw unit. Viewport-width.
None
None
None
None
Mary Baum @marybaum