html5网格布局模板,网格模板列 | grid-template-columns
网格模板列 | grid-template-columns
grid-template-columns定义的行名称和跟踪的大小功能网格列
/* Keyword value */
grid-template-columns: none;
/* values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
/* values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
repeat(auto-fit, [linename3 linename4] 300px)
100px;
grid-template-columns: [linename1 linename2] 100px
repeat(auto-fit, [linename1] 300px) [linename3];
/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;
初始值
没有
适用于
网格容器
遗传
没有
百分比
请参阅内容区域的相应尺寸
媒体
visual
计算值
相对长度转换为绝对长度
动画类型
离散的
规范的顺序
形式语法定义的独特的非模糊顺序
语法
取值
none是一个关键字，没有明确的网格。任何列都将隐式生成，其大小将由grid-auto-columns属性确定。
是一个非负的长度。相对于网格容器的内联大小是一个非负值。如果网格容器的大小取决于其轨道的大小，则百分比必须被视为auto。
轨道的固有尺寸贡献可以根据网格容器的尺寸进行调整，并且以最小的数量增加轨道的最终尺寸，这将导致实现百分比。是单位fr指定曲目的弹性系数的非负值尺寸。每条曲线都按照弹性系数的比例分摊余下的空间。
当出现在minmax()符号之外时，它意味着自动最小(即minmax(auto, ))。
max-content是表示占据网格轨道的网格项目的最大最大内容贡献的关键字。
min-content是一个关键字，表示网格项目占用网格轨道的最小内容贡献。
minmax(min, max)是一个功能符号，它定义了大于或等于min且小于或等于max的大小范围。如果max小于min，则max被忽略，函数被视为min。作为最大值，一个值设置曲目的弹性因子。这至少是无效的。
auto如果最大值是最大内容，则是关键字是相同的。至少它代表最大的最小尺寸(按照规定)min-width/ min-height)占用网格轨道的网格物品。
注意：auto轨道尺寸(只有auto轨道尺寸)可以通过align-content和justify-content属性拉伸。
fit-content( [ | ] )表示公式min(max-content, max(auto, argument))，其计算方法类似于auto(ie minmax(auto, max-content))，只是如果轨道大小大于auto最小值，则轨道大小被夹在参数中。repeat( [ | auto-fill | auto-fit ] , )表示轨道列表的重复片段，允许大量显示循环模式的列以更紧凑的形式写入。
形式语法
none | | where
= [ ? [ | ] ]+ ?
= [ ? [ | ] ]* ?
[ ? [ | ] ]* ?
where
= '[' * ']'
= | minmax( , ) | fit-content( [ | ] )
= repeat( [ ] , [ ? ]+ ? )
= | minmax( , ) | minmax( , )
= repeat( [ ] , [ ? ]+ ? )
= repeat( [ auto-fill | auto-fit ] , [ ? ]+ ? )
where
= | | min-content | max-content | auto
= | | min-content | max-content | auto
=
where
= |
实例
CSS
#grid {
display: grid;
width: 100%;
grid-template-columns: 50px 1fr;
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
HTML
结果
规范
Specification
Status
Comment
CSS Grid LayoutThe definition of 'grid-template-columns' in that specification.
Candidate Recommendation
Initial definition
浏览器兼容性
Feature
Chrome
Edge
Firefox (Gecko)
Internet Explorer
Opera
Safari
Basic support
571
20 (12.10240)-ms3
52.0 (52.0)2
10.0-ms3
444
No support5
Feature
Android Webview
Chrome for Android
Firefox Mobile (Gecko)
IE Mobile
Opera Mobile
Safari Mobile
Basic support
571
571
52.0 (52.0)2
10.0-ms3
44
No support