我们先来看一下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网别的相干文章!