提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样设置Grid Layout (网格规划)列的最小宽度【css教程】,Grid Layout

怎样设置Grid Layout (网格规划)列的最小宽度?设置网格的列最小宽度时,在网格的列宽设置部份中运用minmax()函数,下面我们就来看细致的内容。

我们先来看一下minmax()函数的花样

minmax(最小宽度,最大宽度)

代码示例

鄙人面的代码中,网格的第二行的宽度被指定为最大宽度为1fr,最小宽度为320像素。

.container {
  display: grid;  
  grid-template-columns: 240px minmax(320px, 1fr) 200px;  
  grid-template-rows: 120px auto 120px;
  }

我们来看细致的例子

代码以下

建立以下CSS,HTML文件。

CSS代码:

grid-column-minimum-width.css

.Container {
    display: grid;    
    grid-template-columns: 160px minmax(160px, 1fr) 160px 160px;    
    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: 1 / 2;    
    grid-row: 2 / 3;    
    background-color: #7ee68d;
    }
.GridItem6 {
    grid-column: 2 / 3;    
    grid-row: 2 / 3;    
    background-color: #7ee6e2;
    }
.GridItem7 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #95a7f5
    }
.GridItem8 {
    grid-column: 4 / 5;    
    grid-row: 2 / 3;    
    background-color: #d095f5;
    }

HTML代码:

grid-column-minimum-width.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="grid-column-minimum-width.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>
</body>
</html>

申明:

网格列的宽度由CSS文件中Container类的grid-template-columns来设置的。
由于形貌了四个值,因而网格是四列。它左起有以下值。

160px

minmax(160 px,1 fr)

160px

160px

第2列之外都设置了160像素的牢固值,是牢固的宽度。第二列为minmax(160 px,1 fr),最大列宽为1 fr,最小列宽是160像素。由于指定了1 fr,所以排队的宽度会扩大到框架的宽度。

依据以下的设置,在窗口宽度上显现网格的框,1,3,4列是用160像素宽度显现的,第2列能伸缩的行动。

  grid-template-columns: 160px minmax(160px, 1fr) 160px 160px;

显现结果

运用Web浏览器显现上述HTML文件。将显现以下所示的结果。

减少窗口宽度。第2列之外是牢固宽度,第2列的宽度减少,以下图所示。

宽度减少到160像素,这是第二行的最小宽度。

另外,假如收缩窗口宽度,则没法进一步减少宽度,因而将显现摆布滚动条。

以上就是怎样设置Grid Layout (网格规划)列的最小宽度的细致内容,更多请关注ki4网别的相干文章!

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

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样设置Grid Layout (网格规划)列的最小宽度【css教程】,Grid Layout"

最新评论

    暂无留言哦~~

博客简介

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

友情链接

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

服务热线:
 

 QQ在线交流

 旺旺在线