如何设置Grid Layout （网格布局）列的最小宽度-tutorial css-php.cn

如何设置Grid Layout （网格布局）列的最小宽度

不言

Lepaskan： 2018-12-05 09:54:40

asal

11931 orang telah melayarinya

如何设置Grid Layout （网格布局）列的最小宽度？设置网格的列最小宽度时，在网格的列宽设置部分中使用minmax（）函数，下面我们就来看具体的内容。

网格布局

我们先来看一下minmax（）函数的格式

minmax（最小宽度，最大宽度）

Salin selepas log masuk

代码示例

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

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

Salin selepas log masuk

我们来看具体的例子

代码如下

创建以下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;
    }

Salin selepas log masuk

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>

Salin selepas log masuk

说明：

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

160px

minmax（160 px，1 fr）

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;

Salin selepas log masuk

显示结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

2345截图20181129133728.png

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

2345截图20181129134103.png

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

2345截图20181129134440.png

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

2345截图20181129135009.png

Atas ialah kandungan terperinci 如何设置Grid Layout （网格布局）列的最小宽度. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!