Grid

Grid

CSS中的grid属性是网格布局的一个基础。它主要用来解决使用老布局技术还来的一些问题,比如浮动布局(除除浮动)、inline-block布局(间距问题)。通过提供一种新的方式来给Web页面布局。这个想法是把一个元素定义为一个网格。可以想像成电子表格的行与列。然后,你可以把每个子元素定义成一个列和行(类似于单元格)。不需要修改任何标记,直接通过css搞定。随着这个技术的成熟,我们可以使用这个方法解决我们老的布局技巧带来的问题。而有他的主要优点是你可以在一个页面上不改变文档流的顺序重新排列你的布局顺序。

CSS3 Grid Layout

Web页面的布局,我们常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等,在众多布局方法中,大家最为熟悉的就是浮动布局和网格布局,并且使用不同的细节能得到不同的布局效果。虽然这些布局能让大家实现常见的布局效果,但在实际中还是存在不少的问题,比如说浏览器的兼容性、修改显示顺序需要调整文档结构等。那么有没有什么更好的,更理想的布局方法?这也就是今天要和大家一起学习的一个布局模式——CSS3 Grid Layout

页面

返回顶部