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

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

Avatar for Marco Pantaleo Marco Pantaleo
March 26, 2017
Technology
0
430

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
Tweet

Other Decks in Technology

See All in Technology
Zephyr RTOSを使った開発コンペに参加した件
Avatar for misoji engineer iotengineer22
1
220
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
Avatar for Bdsdigi@1234 flyamerican
1
160
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
Avatar for sergicalsix sergicalsix
1
230
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
Avatar for 株式会社カオナビ kaonavi
9
4.2k
AI時代の開発生産性を加速させるアーキテクチャ設計
Avatar for PLAID Tech plaidtech
PRO
3
150
AIの全社活用を推進するための安全なレールを敷いた話
Avatar for ShoheiMitani shoheimitani
2
510
いつの間にか入れ替わってる！？新しいAWS Security Hubとは？
Avatar for cm-usuda-keisuke cmusudakeisuke
0
120
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
Avatar for ar_tama ar_tama
7
1.1k
関数型プログラミングで 「脳がバグる」を乗り越える
Avatar for manabeai manabeai
1
190
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
Avatar for Markus Harrer feststelltaste
1
130
赤煉瓦倉庫勉強会｢Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記｣
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
2
360
タイミーのデータモデリング事例と今後のチャレンジ
Avatar for Toshiki Tsuchikawa ttccddtoki
6
2.4k

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
54k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k

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.