css grid设置宽度,如何设置Grid Layout (网格布局)列的最小宽度
如何设置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像素,这是第二行的最小宽度。
此外,如果缩短窗口宽度,则无法进一步缩小宽度,因此将显示左右滚动条。
css grid设置宽度,如何设置Grid Layout (网格布局)列的最小宽度相关推荐
- grid layout网格布局详解
grid layout网格布局详解 什么是grid layout grid的特点 grid css属性的基础知识 创建一个grid布局 创建一个网格 隐性网格与显性网格 尺寸单位fr repeat函数 ...
- html设置页面大小始终100%,css width 100% 宽度百分之百设置与不设置
css宽度百分之百设置与不设置 css width可以设置具体固定数值比如10px.500px.980px.1200px等,以达到网页固定宽度显示.css 宽度 width也可以设置百分比值,比如80 ...
- grid layout(网格布局、栅格布局、grid布局):bootstrap,请到历史书报道!
grid布局就是表格布局(grid layout),或者称之为栅格布局也行.因为栅格布局的概念来自于bootstrap,这里使用栅格布局来与bootstrap做关联,是因为它俩是描述的同一个东西.自从 ...
- css字符怎么设置宽度一样,设置字符的CSS宽度(setting character width with css)
我需要设计与CSS一个简单的标志,一切都只是字母大小的罚款. 的要求是使用Verdana字体但具有宽字符所示在图像中. 然而,当前的代码它们看起来窄. 反正是有实现,而无需使用图像这种行为? 我不是在 ...
- java给HSSFSheet设置宽度_hssfsheet 设置宽度
(HSSFCell.CELL_TYPE_STRING); //设置单元格为 STRING 类型 cell.getNumericCellValue();//读取为数值类型的单元格内容 9. 设置列宽.行 ...
- html设定列的最小宽度,设置Grid Layout列最小宽度的方法
设置Grid Layout列最小宽度的方法 发布时间:2020-08-29 11:22:09 来源:亿速云 阅读:184 作者:小新 这篇文章主要介绍设置Grid Layout列最小宽度的方法,文中介 ...
- 【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格 相关术语 1.2 网格布局的 属性分类 2. grid 属性: 同时 ...
- css【详解】grid布局—— 网格布局(栅格布局)
网格布局(Grid)是最强大的 CSS 布局方案 grid布局 和 flex布局的区别 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局. Grid 布 ...
- CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶:网格布局(Grid)及其基本属性 网格布局(Grid)是最强大的 CSS 布局方案.起初我也认为 flex 布局就可以完成绝大部分布局场景,但谁不希望用更直观.更简洁的方式来布局自己的网 ...
最新文章
- php a标签 执行js,关于a标签不能调用js方法的小细节,你注意到了么?
- Leetcode264. Ugly Number II丑数2
- captura录屏没声音_电脑录屏有哪些好用的软件呢?
- 为input输入框添加圆角并去除阴影
- Web框架——Flask系列之CSRFToken详解(四)
- luogu P1427 小鱼的数字游戏
- hystrix 源码 线程池隔离_springcloud-线程池隔离(consumer)ribbon
- oracle中的合并查询
- mysql 以周为单位记录数据_mysql 按月/按周汇总统计函数 DATE_FORMAT() 函数
- 1. ansible-playbook 变量定义与引用
- 数据分析在内容运营中的作用
- PySide QtCore.Signal帮助手册
- 帆软控件焦点事件设置可用性
- MOSS搜索的爬网错误【访问被拒绝。请验证默认内容访问账户是否有权访问此库】...
- websocket传输数据大小限制_WebSocket传输超过126字节数据的方法
- JS indexOf 用法
- postman 一直Sending
- JVM Advent Calendar:JCP.NEXT,简化了JCP程序
- OpenCV更改图片颜色
- 记录错误:ImportError: No module named ‘tools‘。jupyter无法import第三方文件夹的库