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

  •   CSS 中文开发手册

    网格模板行 | grid-template-rows (Grid Layout) - CSS 中文开发手册

    grid-template-rows定义的行名称和跟踪的大小功能的网格行

    /* Keyword value */
    grid-template-rows: none;
    
    /* <track-list> values */
    grid-template-rows: 100px 1fr;
    grid-template-rows: [linename] 100px;
    grid-template-rows: [linename1] 100px [linename2 linename3];
    grid-template-rows: minmax(100px, 1fr);
    grid-template-rows: fit-content(40%);
    grid-template-rows: repeat(3, 200px);
    
    /* <auto-track-list> values */
    grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
    grid-template-rows: minmax(100px, max-content)
                           repeat(auto-fill, 200px) 20%;
    grid-template-rows: [linename1] 100px [linename2]
                           repeat(auto-fit, [linename3 linename4] 300px)
                           100px;
    grid-template-rows: [linename1 linename2] 100px
                           repeat(auto-fit, [linename1] 300px) [linename3];
    
    /* Global values */
    grid-template-rows: inherit;
    grid-template-rows: initial;
    grid-template-rows: unset;

    初始值

    没有

    适用于

    网格容器

    继承

    没有

    百分比

    请参阅内容区域的相应尺寸

    媒体

    视觉

    计算值

    相对长度转换为绝对长度

    动画类型

    离散的

    规范的顺序

    形式语法定义的独特的非模糊顺序

    语法

    此属性可指定为:

    关键字值none或者是<track-list>或者<auto-track-list>

    取值

    none是一个关键字,没有明确的网格。任何行都将隐式生成,其大小将由grid-auto-rows属性确定。

    <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;
      height: 100px;
      grid-template-rows: 30px 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-rows' 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

    10.1

    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

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32209.html

    posted on 2020-07-02 22:42  MrAit  阅读(724)  评论(0编辑  收藏  举报

    导航