css的gird布局

链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

容器和项目:

css的gird布局

 

 

上面代码中,最外层的<div>元素就是容器内层的三个<div>元素就是项目

注意:项目只能是容器的顶层子元素不包含项目的子元素比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效

行和列:

容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。

css的gird布局

 

 

单元格:

行和列的交叉区域,称为"单元格"(cell)。

正常情况下,n行和m列会产生n x m个单元格。比如,2行2列会产生4个单元格。

网格线:

划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。

正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。

css的gird布局

 

 

容器属性:

Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。

 

 

 

 

 

 

 

 

 

 

 

css的gird布局

上一篇:css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果


下一篇:jquery选择器