CSS Grid實踐(待)

首先提及,雖然14年就看到有Grid的佈局指南(CSS Grid布局:网格区域)但時至今日,并非所有瀏覽器都支持,下面的是找到的瀏覽器支持情況:

CSS Grid實踐(待)_第1张图片

個人測試了一下常用的:
不支持:360瀏覽器(WebKit 537.36(Chrome 45.0.2454.101))、Edge(Edge 14.14393 兼容 WebKit 537.36 )
支持:FireFox(Mozilla/5.0 )、Chrome(WebKit 537.36(Chrome 58.0.3029.81)) Chrome可能要開啓Web實驗室

看來還要一段時間才能在大部分瀏覽器上看到


第一個佈局參考:CSS Grid VS Flexbox:实例对比。
上面這個實例中,Flex比Grid多了一個div,自己修改了下,在不變動html結構的情況下,只變換css文件。
下面是測試結果
查看實際效果


  • 2017/4/28 第一次編輯

你可能感兴趣的:(CSS Grid實踐(待))