CSS参考手册
网格布局 | Grid Layout
网格模板列 | grid-template-columns
grid-template-columns
定义的行名称和跟踪的大小功能网格列
/* Keyword value */
grid-template-columns: none;
/* <track-list> 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);
/* <auto-track-list> 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
属性确定。
<length>
是一个非负的长度。相对于网格容器的内联大小<percentage>
是一个非负值<percentage>
。如果网格容器的大小取决于其轨道的大小,则百分比必须被视为auto
。
轨道的固有尺寸贡献可以根据网格容器的尺寸进行调整,并且以最小的数量增加轨道的最终尺寸,这将导致实现百分比。<flex>
是单位fr
指定曲目的弹性系数的非负值尺寸。每条<flex>
曲线都按照弹性系数的比例分摊余下的空间。
当出现在minmax()
符号之外时,它意味着自动最小(即minmax(auto, <flex>)
)。
max-content
是表示占据网格轨道的网格项目的最大最大内容贡献的关键字。
min-content
是一个关键字,表示网格项目占用网格轨道的最小内容贡献。
minmax(min, max)
是一个功能符号,它定义了大于或等于min且小于或等于max的大小范围。如果max小于min,则max被忽略,函数被视为min。作为最大值,一个<flex>
值设置曲目的弹性因子。这至少是无效的。
auto
如果最大值是最大内容,则是关键字是相同的。至少它代表最大的最小尺寸(按照规定)min-width
/ min-height
)占用网格轨道的网格物品。
注意:auto
轨道尺寸(只有auto
轨道尺寸)可以通过align-content
和justify-content
属性拉伸。
fit-content( [ <length> | <percentage> ] )
表示公式min(max-content, max(auto, argument))
,其计算方法类似于auto
(ie minmax(auto, max-content)
),只是如果轨道大小大于auto
最小值,则轨道大小被夹在参数中。repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
表示轨道列表的重复片段,允许大量显示循环模式的列以更紧凑的形式写入。
形式语法
none | <track-list> | <auto-track-list>where
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
where
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>
where
<length-percentage> = <length> | <percentage>
实例
CSS
#grid {
display: grid;
width: 100%;
grid-template-columns: 50px 1fr;
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
HTML
<div id="grid">
<div id="areaA">A</div>
<div id="areaB">B</div>
</div>
结果
规范
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 |
网格布局 | Grid Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。