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

Modern layouts with CSS grid

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Chen Hui Jing Chen Hui Jing
February 15, 2018
Programming
1
42

Modern layouts with CSS grid

An introduction to CSS grid and how it can be used to create modern layouts for the web.

Avatar for Chen Hui Jing

Chen Hui Jing

February 15, 2018
Tweet

More Decks by Chen Hui Jing

See All by Chen Hui Jing
Directions of the web
Avatar for Chen Hui Jing huijing
0
39
Box alignment
Avatar for Chen Hui Jing huijing
0
23
Be like water: applying Bruce Lee's philosophy to web design
Avatar for Chen Hui Jing huijing
2
100
Typesetting East Asian languages on the web
Avatar for Chen Hui Jing huijing
0
32
Rich dynamic design with modern CSS
Avatar for Chen Hui Jing huijing
1
43
The case for modern CSS
Avatar for Chen Hui Jing huijing
1
56
East Asian web typography
Avatar for Chen Hui Jing huijing
0
44
Layout the web with CSS Grid (and friends)
Avatar for Chen Hui Jing huijing
1
14
Not in Kansas anymore: a new frontier for web design
Avatar for Chen Hui Jing huijing
0
40

Other Decks in Programming

See All in Programming
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.1k
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
960
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
100
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
620
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
200
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
980

Featured

See All Featured
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
180
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
220
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  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. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None