如何设置Grid Layout （网格布局）列的最小宽度-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

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

网格布局

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

1	`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;
    }