网格布局完全指南

网格布局

这个是css网格布局的完全指南,涉及到网格布局的父元素属性说明,以及网格布局的子元素属性说明。

内容列表

1.网格布局介绍

2.网格布局基础知识与浏览器支持

3.网络布局中的重要术语

4.Gird属性

5.网格布局特有单位和函数

6.流式Columns Snippet

7.动画

网格布局介绍

css 网络布局也就是Grid 或css grid ,它是一个二维的布局系统,完全改变了我们过去的布局方式。css是用来布局我们的web页面,但是它有很多做到不到位的地方。最初,我们使用table ,然后是float position 还有inline-block,但是这些方法基本上是hack方式做到的,此外还不支持很多重要功能(如垂直居中)Flexbox是个很强的布局工具,但是它只是一个一维的布局方案。Grid是第一个专门为解决布局问题而创建的CSS模块,在它之前我们做网站的过程中,我们一直在用hack手段解决这些问题。在这片文章里,我不会去讲grid之前版本的相关属性。

网格布局的基础知识与浏览器支持

2017年初,几乎所有的浏览器都支持不带浏览器前缀的grid布局模型,像Chrome,Firefox Oprea 以及Safari 和IE10等,但是这个grid语法的一个过渡版本。现在gird最新属性已经发生变化了,是时候写一份新版的grid布局的指南了。

为了使网格布局开始工作,我们需要利用display:grid 这个样式将一个元素作为网格布局的容器。利用 gird-template-columnsgrid-template-rows来设置行与列的尺寸,然后使用gird-columngrid-row将子元素放入网格中。这个与flexbox布局很相似,每个gird 子项的位置并不重要。我们可以使用的CSS属性按任何顺序放置它们,这样用媒体查询重新安排的网格布局变得非常容易。我们可以想象一下,定义整个页面的布局,然后完全重新排列以适应不同的屏幕宽度,只需几行CSS即可。网格是有史以来最强大的CSS模块之一。

下面的图片是从Caniuse中获取的数据,Caniuse中能够查询到各个浏览器对gird支持更详细的数据。

Desktop支持

pc浏览器支持情况

Mobile/Tablet 支持

移动端浏览器支持情况
阅读 “网格布局完全指南” itemprop="discussionURL"发表评论