网格自动行 | grid-auto-rows (Grid Layout)

  CSS 中文开发手册

网格自动行 | grid-auto-rows (Grid Layout) - CSS 中文开发手册

grid-auto-rows属性指定隐式创建的网格行跟踪的大小。

/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* <length> values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* <percentage> values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* <flex> values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;

如果网格项定位在未显式调整大小的行中，则grid-template-rows，隐式格网轨道是用来支撑它的。这可以通过显式定位到超出范围的行，或者通过自动布局算法创建额外的行来实现。

初始值	auto
应用于	grid containers
是否继承	no
百分比	refer to corresponding dimension of the content area
适用媒体	visual
计算值	the percentage as specified or the absolute length
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

取值

<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属性进行拉伸。

形式语法

<track-size>+where 
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
where 
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
where 
<length-percentage> = <length> | <percentage>

例

HTML内容

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS内容

#grid {
   200px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'grid-auto-rows' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	57.01	52.0 (52.0)2	10.0-ms3	20-ms3	444	No support5

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57.01	57.01	52.0 (52.0)2	10.0-ms3	44	No support

  CSS 中文开发手册

  本文标题：网格自动行 | grid-auto-rows (Grid Layout) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32215.html