grid-template-columns

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本中使用。它自以下日期起在各个浏览器中可用： 2020 年 7 月.

grid-template-columns CSS 属性定义 网格列 的行名和轨道大小函数。

试一试

语法

css
/* 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);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* <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: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;

值

none

指示没有显式网格。任何列都将隐式生成，其大小将由 grid-auto-columns 属性决定。

[linename]

一个 <custom-ident>，指定该位置行的名称。标识符可以是任何有效的字符串，除了保留字 span 和 auto。行可以在方括号内用空格分隔多个名称，例如 [line-name-a line-name-b]。

<length>

一个非负长度，给出列的宽度。

<percentage>

是一个相对于网格容器内联大小的非负 <percentage> 值。如果网格容器的大小取决于其轨道的尺寸，则百分比必须被视为 auto。轨道的内在尺寸贡献可能会调整到网格容器的大小，并将轨道的最终尺寸增加到最小的数量，从而使百分比得到遵守。

<flex>

是一个非负尺寸，单位为 fr，指定轨道的弹性因子。每个 <flex> 大小的轨道按其弹性因子的比例占用剩余空间。

当出现在 minmax() 符号之外时，它表示一个自动最小值（即 minmax(auto, <flex>)）。

max-content

是一个关键字，表示占用网格轨道的网格项目的最大 最大内容贡献。例如，如果网格轨道的第一个元素包含句子 “Repetitio est mater studiorum”，而第二个元素包含句子 “Dum spiro, spero”，则最大内容贡献将由所有网格元素中最大句子的尺寸定义 - “Repetitio est mater studiorum”。

min-content

是一个关键字，表示占用网格轨道的网格项目的最大 最小内容贡献。例如，如果网格轨道的第一个元素包含句子 “Repetitio est mater studiorum”，而第二个元素包含句子 “Dum spiro, spero”，则最小内容贡献将由所有网格元素中所有句子中最大单词的尺寸定义 - “studiorum”。

minmax(min, max)

是一个函数符号，定义一个大于或等于 min 且小于或等于 max 的尺寸范围。如果 max 小于 min，则 max 将被忽略，该函数将被视为 min。作为最大值，<flex> 值设置轨道的弹性因子。作为最小值则无效。

auto

作为最大值表示该轨道中项目的最大 max-content 尺寸。

作为最小值表示该轨道中项目的最大最小尺寸（由项目的 min-width/min-height 指定）。这通常（尽管并非总是）是 min-content 尺寸。

如果在 minmax() 符号之外使用，auto 表示上述最小值和最大值之间的范围。在大多数情况下，这与 minmax(min-content,max-content) 的行为类似。

注意：auto 轨道尺寸（并且只有 auto 轨道尺寸）可以通过 align-content 和 justify-content 属性进行拉伸。因此，默认情况下，auto 尺寸的轨道将占据网格容器中任何剩余的空间。

fit-content( [ <length> | <percentage> ] )

表示公式 max(minimum, min(limit, max-content))，其中 minimum 表示 auto 的最小值（通常但并非总是等于 min-content 的最小值），而 limit 是作为参数传递给 fit-content() 的轨道大小函数。这本质上计算为 minmax(auto, max-content) 和 minmax(auto, limit) 中较小的那个。

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

表示轨道列表的重复片段，允许以更紧凑的形式编写大量具有重复模式的列。

masonry

masonry 值表示此轴应根据砌体算法进行布局。

subgrid

subgrid 值表示网格将在该轴上采用其父网格的跨越部分。网格行/列的大小将从父网格的定义中获取，而不是显式指定。

正式定义

初始值none
应用于网格容器
继承否
百分比指的是内容区域的相应尺寸
计算值如指定，但将相对长度转换为绝对长度
动画类型长度、百分比或 calc 的简单列表，前提是列表中唯一的差异在于长度、百分比或 calc 组件的值。

正式语法

grid-template-columns = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<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>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>

示例

指定网格列大小

HTML

html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

结果

规范

规范
CSS 网格布局模块 Level 2
# 轨道大小
CSS 网格布局模块 Level 2
# 子网格

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅