Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Flexbox Froggy Flexbox Defense
✓
✓
✓
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Upcoming SlideShare
Loading in …5
×

Grid - 新時代的排版利器

7,849 views

Published on

於 2017/01/23 在 F2E & RGBA Meetup 分享
( 活動網址:http://f2e.kktix.cc/events/f2e6-56d17c-0f9e5b-3997b7-a9203f-d684fd-886f38 )

隨著網頁的版面越來越多變,我們有了專門用於二維排版的 CSS Layout 屬性 -- Grid。
Grid 在設定元素的位置、尺寸時,比過去常用的方法 ( table / inline / float / flexbox / ... ) 方便許多。目前各個瀏覽器支援度雖然低,但也馬上要陸續跟進了,之後我們將可以使用 Grid 寫出更精簡、直覺,也更有彈性的 HTML 與 CSS,十分令人期待!

非常感謝能有機會分享,也感謝大家不嫌棄 =艸=

Published in: Engineering
  • Login to see the comments

Grid - 新時代的排版利器

  1. 1. Flexbox Froggy Flexbox Defense
  2. 2. ✓ ✓ ✓

×