设置GridLayout列最小宽度的方法-创新互联

这篇文章主要介绍设置Grid Layout列最小宽度的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联公司主营屏边网站建设的网络公司,主营网站建设方案,成都App定制开发,屏边h5成都小程序开发搭建,屏边网站营销推广欢迎屏边等地区企业咨询

如何设置Grid Layout (网格布局)列的最小宽度?设置网格的列最小宽度时,在网格的列宽设置部分中使用minmax()函数。

设置Grid Layout列最小宽度的方法

我们先来看一下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


  
  
  


  
内容1
内容2
内容3
内容4
内容5
内容6
内容7
内容8

说明:

网格列的宽度由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文件。将显示如下所示的效果。

设置Grid Layout列最小宽度的方法

缩小窗口宽度。第2列以外是固定宽度,第2列的宽度缩小,如下图所示。

设置Grid Layout列最小宽度的方法

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

设置Grid Layout列最小宽度的方法

此外,如果缩短窗口宽度,则无法进一步缩小宽度,因此将显示左右滚动条。

设置Grid Layout列最小宽度的方法

以上是设置Grid Layout列最小宽度的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道!


名称栏目:设置GridLayout列最小宽度的方法-创新互联
链接分享:http://scyanting.com/article/cohogd.html