网格模板列 | grid-template-columns (Grid Layout) - CSS 中文开发手册 - Break易站

• CSS 中文开发手册​ 网格模板列 | grid-template-columns (Grid Layout) - CSS 中文开发手册
  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