提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > 网格规划中以地区和页面团体的宽度的比率指定网格的宽度【html5教程】,网格布局

在网格规划(Grid Layout)中,你能够将网格的宽度指定为显现地区或全部页面的宽度的比例,但假如将网格的宽度指定为比例,则需要运用fr为单位,下面我们来看细致的内容。

我们话不多说,直接来看细致的例子

代码以下:

编写以下HTML文件

SimpleGridFr.css

.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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="SimpleGridFr.css"/>
</head>
<body>
    <div class="Container">
      <div class="GridItem1">項目1</div>
      <div class="GridItem2">項目2</div>
      <div class="GridItem3">項目3</div>
      <div class="GridItem4">項目4</div>
      <div class="GridItem5">項目5</div>
      <div class="GridItem6">項目6</div>
      <div class="GridItem7">項目7</div>
      <div class="GridItem8">項目8</div>
      <div class="GridItem9">項目9</div>
      <div class="GridItem10">項目10</div>
    </div>
  </body>
</html>

申明:

在此示例中,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页面。将显现以下所示的结果。

减少窗口宽度。跟着窗口的宽度的减少网格的宽度也会减少。宽度减小,同时坚持网格单位宽度比。

以上就是网格规划中以地区和页面团体的宽度的比率指定网格的宽度的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"网格规划中以地区和页面团体的宽度的比率指定网格的宽度【html5教程】,网格布局"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线