体验 CSS Grid 布局

前几天练习了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布局的变态强大的地方了。

好,字数凑够了,可以开启原创声明了。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181101G12LZA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券