如何设置Grid Layout （网格布局）列的最小宽度？设置网格的列最小宽度时，在网格的列宽设置部分中使用minmax（）函数，下面我们就来看具体的内容。
我们先来看一下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
说明：
网格列的宽度由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 （网格布局）列的最小宽度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613747.html
微信扫一扫 
支付宝扫一扫 
