Grid

本文由大漠根据Chris Coyier的《grid》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://css-tricks.com/almanac/properties/g/grid,以及作者相关信息

——作者:Chris Coyier

——译者:大漠

CSS中的grid属性是网格布局的一个基础。它主要用来解决使用老布局技术还来的一些问题,比如浮动布局(除除浮动)、inline-block布局(间距问题)。通过提供一种新的方式来给Web页面布局。

这个想法是把一个元素定义为一个网格。可以想像成电子表格的行与列。然后,你可以把每个子元素定义成一个列和行(类似于单元格)。不需要修改任何标记,直接通过css搞定。

随着这个技术的成熟,我们可以使用这个方法解决我们老的布局技巧带来的问题。而有他的主要优点是你可以在一个页面上不改变文档流的顺序重新排列你的布局顺序。

注:请注意,CSS网格布局目前还是一个工作草案。也就是说,他们的修改会影响目前支持的浏览器实现效果。

属性

因为CSS网格布局是一个模块而不是一个属性,他集合了一堆的属性(大约15个)要一起使用。一些是用来设置父元素(网格元素),一些用来设置子元素(网格项目)。

目前支持的属性

以下是网格元素属性(主要适用于父元素,也就是网格容器)。

display:grid | inline-grid

display: other values | grid | inline-grid	

这个将一个元素定义为网格格式化上下文。

grid-rows | grid-columns

grid-rows | grid-columns:  
<track-list>    => [ [ <string> ]* <track-group> [ <string> ]* ]+ | none
<track-group>   => <track-minmax> | [ repeat( <positive-integer> , [ [ <string> ]* <track-minmax> [ <string> ]* ]+ ) ]
<track-minmax>  => minmax( <track-breadth> , <track-breadth> ) | auto | <track-breadt
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/grid.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部