设置网格布局列最小宽度的方法

  介绍

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

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

设置网格布局列最小宽度的方法

我们先来看一下极大极小()函数的格式

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

代码示例

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

。容器{   显示:网格;   grid-template-columns: 240 px极大极小(320 px, fr) 200 px;   grid-template-rows: 120 px汽车120 px;   }

我们来看具体的例子

代码如下

创建以下CSS, HTML文件。

CSS代码:

grid-column-minimum-width。css

 & lt; !DOCTYPE html> & lt; html> & lt; head>
  & lt;元charset=皍tf-8"/比;
  & lt; title> & lt;/title>
  & lt;链接rel=皊tylesheet"href=https://www.yisu.com/zixun/" grid-column-minimum-width.css "/>
  头
  身体<>
  
  
内容1
  
内容2
  
内容3
  
内容4
  
内容5
  
内容6
  
内容7
  
内容8
  
     

说明:

网格列的宽度由CSS文件中容器类的grid-template-columns来设置的。
由于描述了四个值,因此网格是四列。它左起有以下值。

160 px

极大极小(160 px, fr)

160 px

160 px

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

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

grid-template-columns: 160 px极大极小(160 px, fr) 160 px 160 px;

显示结果

使用网页浏览器显示上述html文件。将显示如下所示的效果。

设置网格布局列最小宽度的方法

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

设置网格布局列最小宽度的方法

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

设置网格布局列最小宽度的方法

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

设置网格布局列最小宽度的方法”>。</p> <p class=以上是设置网格布局列最小宽度的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

设置网格布局列最小宽度的方法