Upgrade to Pro — share decks privately, control downloads, hide ads and more …

There will be grid - Why CSS Grid Layout May Be...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Marco Pantaleo Marco Pantaleo
March 26, 2017
Technology
450
0

There will be grid - Why CSS Grid Layout May Be The Portal Into A New World

held at JSUnconf 2017

Avatar for Marco Pantaleo

Marco Pantaleo

March 26, 2017

Other Decks in Technology

See All in Technology
契約書からの情報抽出を行うLLMのスループットを、バッチ処理を用いて最大40%改善した話
Avatar for SansanTech sansantech
PRO
3
340
マルチモーダル非構造データとの闘い
Avatar for shibuiwilliam shibuiwilliam
1
130
Databricks Lakehouse Federationで 運用負荷ゼロのデータ連携
Avatar for Kenji Matsuda nek0128
0
100
タスク管理も1on1も、もう「管理」じゃない - KiroとBedrock AgentCoreで変わった“判断の仕事”
Avatar for Yusuke Shimizu yusukeshimizu
0
160
VSCode中心だった自分がターミナル沼に入門した話
Avatar for Genki Sano sanogemaru
0
890
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
Avatar for kaomi kaomi_wombat
0
290
Move Fast and Break Things: 10 in 20
Avatar for Rami McCarthy ramimac
0
110
出版記念イベントin大阪「書籍紹介＆私がよく使うMCPサーバー3選と社内で安全に活用する方法」
Avatar for KintoTech_Dev kintotechdev
0
130
20260326_AIDD事例紹介_ULSC.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
0
330
OCI技術資料 : ロード・バランサ 概要 - FLB・NLB共通
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
27k
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
190
FASTでAIエージェントを作りまくろう！
Avatar for YukiOgawa yukiogawa
4
180

Featured

See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
110
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
88
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
160
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.8k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
250
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
280
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
It's Worth the Effort
Avatar for 3n 3n
188
29k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
140
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k

Transcript

  1. ere will be grid. Why CSS Grid Layout May Be

    e Portal Into A New World Marco Pantaleo @peeofive

  2. Hi, I’m Marco. •42 years old •Frontend Developer •…since 2001

    I work here —>

  3. Why a talk about Grid Layout?

  4. tl;dr: It’s awesome. …and then some.

  5. Let’s get back in time…

  6. logo.html navigation.html main.html footer.html

  7. Frames easy to use not accessible at all bad for

    search engines include content you don’t own
  8. None

  9. T able layout easy aligning & centering „interesting“ layouts table

    hell only good for fixed layouts
  10. None

  11. CSS Layout Zen Garden & A List Apart floats, clears

    display inline-block browser incompatibilities (hi IE6)

  12. en in 2013…

  13. Flexbox super flexible :) caniuse: green but only in one

    direction e grid is a lie.
  14. None
  15. None

  16. Now let’s code.

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None

  31. Back to the real world…

  32. None

  33. Many other features Alignment Justification shorthands …

  34. None

  35. anks.