CSS网格布局（grid）的用法详解

1、css网格布局（grid）的用法详解我们先来看一下容器框架(id名)display:grid;grid-template-columns:(第一列宽度)(其次列宽度).(第n列宽度);grid-template-rows:(第一行高)(其次行高).(第n行高);或者.(class名)display:grid;grid-template-columns:(第一列宽度)(其次列宽度).(第n列宽度);grid-template-rows:(第一行高)(其次行高).(第n行高);还有一种设置内联网格的办法。(id名)display:inline-grid;grid-template-columns:

2、(第一列宽度)(其次列宽度).(第n列宽度);grid-template-rows:(第一行高)(其次行高).(第n行高);或者.(class名)display:inline-grid;grid-template-columns:(第一列宽度)(其次列宽度).(第n列宽度);grid-template-rows:(第一行高)(其次行高).(第n行高);网格框架（项目框架）为成为网格框架的元素指定以下css。(id名)grid-column:（列方向的网格的开头位置）/（列方向的网格的结束位置）;grid-row:（行方向的网格的开头位置）/（行方向的网格的结束位置);或者.(class名)gr

3、id-column:（列方向的网格的开头位置）/（列方向的网格的结束位置）;grid-row:（行方向的网格的开头位置）/（行方向的网格的结束位置);或(id名)grid-column-start:(列方向的网格的开头位置);grid-column-end:(列方向的网格的结束位置);grid-row-start:(行方向的网格的开头位置);grid-row-end:(行方向的网格的结束位置);或者.(class名)grid-column-start:(列方向的网格的开头位置);grid-column-end:(列方向的网格的结束位置);grid-row-start:(行方向的网格的开头位置)

4、;grid-row-end:(行方向的网格的结束位置);描述示例用法网格线指定网格的起始位置和结束位置。在下面的代码的状况下，单元的宽度是从其次栅格的垂直线到第四栅格的垂直线。grid-column:2/4;代码示例创建以下css、html文件。simplegrid.css.containerdisplay:grid;grid-template-columns:160px160px160px160px;grid-template-rows:120px120px;border:solidff6a001px;.griditem1grid-column:1/2;grid-row:1/2;backgr

5、ound-color:ff9c9c;.griditem2grid-column:2/3;grid-row:1/2;background-color:ffcb70;.griditem3grid-column:3/4;grid-row:1/2;background-color:fffd70;.griditem4grid-column:4/5;grid-row:1/2;background-color:b0ff70;.griditem5grid-column:1/2;grid-row:2/3;background-color:7ee68d;.griditem6grid-column:2/3;grid

6、-row:2/3;background-color:7ee6e2;.griditem7grid-column:3/4;grid-row:2/3;background-color:95a7f5.griditem8grid-column:4/5;grid-row:2/3;background-color:d095f5;simplegrid.html内容1内容2内容3内容4内容5内容6内容7内容8解释：下面的容器的css描述创建一个4行×2行的网格。.containerdisplay:grid;grid-template-columns:160px160px160px160px;grid-template-rows:120px120px;border:solidff6a001px;网格的每个元素的css将是（griditem1griditem8）。我们为每个网格定义网格单元。为网格的每个单元格更改背景色彩。.griditem1grid-column:1/2;grid-row:1/2;background-color:ff9c9c;显示结果用法firefox扫瞄器