前几天练习了flex弹性盒子布局,感觉很强大,使用起来很别扭,今天玩Grid网格布局,同样很强大,使用起来更别扭。。。
Grid网格布局是何方神圣?
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Grid Items 网格项),你就可以轻松使用 Grid(网格) 布局。
Grid代码长啥样:
看网上的教程,才知道:
flexbox 适合一维布局,比如导航条。
grid 适合二维布局,比如圣杯结构。
换成人话就是,首先,用grid网格搭建整体布局结构,在每个网格里的局部布局,就使用flexbox。
flexbox的兼容性已经很好了,可以放心大胆的用。grid还差点,在生产环境中谨慎使用。
由于,网上的教程一把一把的,这里就不复制粘贴详细的教程了,大家可以新建几个html文件,跟着教程练习练习。下面分享三篇文章,看完这三篇文章,你就已经掌握Grid布局了。一定要按顺序看啊!
1、《5分钟学会 CSS Grid 布局》
http://www.css88.com/archives/8506
2、《CSS Grid 布局完全指南》
http://www.css88.com/archives/8510
3、《如何使用 CSS Grid 快速而又灵活的布局 》
http://www.css88.com/archives/8512
相信看完以上三篇文章,你就能体会到Grid布局的变态强大的地方了。
好,字数凑够了,可以开启原创声明了。
领取专属 10元无门槛券
私享最新 技术干货