网格布局中以区域和页面整体的宽度的比率指定网格的宽度

在网格布局（GridLayout）中，你可以将网格的宽度指定为显示区域或整个页面的宽度的比例，但要是将网格的宽度指定为比例，则需要运用fr为单位，下面我们来看概括的内容。 在网格布局（Grid Layout）中，你可以将网格的宽度指定为显示区域或整个页面的宽度的比例，但要是将网格的宽度指定为比例，则需要运用fr为单位，下面我们来看概括的内容。

.Container {
    display: grid;    
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;    
    grid-template-rows: 120px 120px;    
    border: solid #ff6a00 1px;
    }
.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
    }
.GridItem2 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ffcb70;
    }
.GridItem3 {
    grid-column: 3 / 4;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
    }
.GridItem4 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #b0ff70;
    }
.GridItem5 {
    grid-column: 5 / 6;    
    grid-row: 1 / 2;    
    background-color: #7ee68d;
    }
.GridItem6 {
    grid-column: 1 / 2;    
    grid-row: 2 / 3;    
    background-color: #7ee6e2;
    }
.GridItem7 {
    grid-column: 2 / 3;    
    grid-row: 2 / 3;    
    background-color: #95a7f5
    }
.GridItem8 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #d095f5;
    }
.GridItem9 {
    grid-column: 4 / 5;    
    grid-row: 2 / 3;    
    background-color: #f5aee4;
    }
.GridItem10 {
    grid-column: 5 / 6;    
    grid-row: 2 / 3;    
    background-color: #edc3a4;
    }

SimpleGridFr.html

    
      項目1
      項目2
      項目3
      項目4
      項目5
      項目6
      項目7
      項目8
      項目9
      項目10
    
  

注明：

在此示例中，Container类的CSS描述如下所示。我们将网格列（水平标的目的）设定为5列，将行（垂直标的目的）设定为2行。
grid-template-columns的值设定为1fr，而且通过该设定，网格的宽度按比率显示。在该示例中，因为存在五个1fr的设定，因而1fr的宽度显示为显示区域（整个页面）的宽度的1/5。

.Container {
    display: grid;    
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;    
    grid-template-rows: 120px 120px;    
    border: solid #ff6a00 1px;
    }

将HTML页面的“GridItem 1”?“Griditem 10”的div框分配给网格的每个单元格。

显示效果

运转上面的HTML页面。将显示如下所示的结果。五个网格的宽度以相称的隔断显示。

最后，我们来更改下列代码中的一些值看看会产生什么状况

确认在grid-tempat-COumns属性中指定了1 fr之外的值时，将Continer类的设定更改为下列内容。

鄙人面的描述中，首先列，第三列，第五列为1 fr，第二列为3fr，第四列为2fr。由于整体的合计是8 fr，所以1、3、5列的单元格的宽度是显示区域（窗口宽度）的8分之一的宽度。一样的第二列是8分之3的宽度，第四列是4分之一（8分之2）的宽度。

.Container {
    display: grid;    
    grid-template-columns: 1fr 3fr 1fr 2fr 1fr;    
    grid-template-rows: 120px 120px;    
    border: solid #ff6a00 1px;
    }

显示已更改的HTML页面。将显示如下所示的结果。

以上就是网格布局中以区域和页面整体的宽度的比率指定网格的宽度的细致内容，更多请关注 百分百源码网 其它相干文章！