格列隙 | grid-column-gap (Grid Layout) - CSS 中文开发手册 - Break易站

  •   CSS 中文开发手册

    格列隙 | grid-column-gap (Grid Layout) - CSS 中文开发手册

    grid-column-gap指定装饰之间的网列。

    /* <length> values */
    grid-column-gap: 20px;
    grid-column-gap: 1em;
    grid-column-gap: 3vmin;
    grid-column-gap: 0.5cm;
    
    /* <percentage> value */
    grid-column-gap: 10%;
    
    /* Global values */
    grid-column-gap: inherit;
    grid-column-gap: initial;
    grid-column-gap: unset;

    效果就像受影响的人网格线获取宽度:栅极轨道在两个网格线之间是代表它们的排水沟之间的空间。为了调整轨道尺寸,每个沟槽基本上被视为指定长度的额外轨道。负值无效。

    计算值

    0

    应用于

    grid containers

    继承

    no

    百分比

    refer to corresponding dimension of the content area

    使用媒体

    visual

    计算值

    the percentage as specified or the absolute length

    动画类型

    a length

    规范顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    取值

    <length-percentage>分隔网格列的沟槽的宽度。

    <percentage>值与元素的维度相关。

    形式语法

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

    HTML内容

    <div id="grid">
      <div></div>
      <div></div>
      <div></div>
    </div>

    CSS内容

    #grid {
      display: grid;
      height: 100px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 100px;
      grid-column-gap: 20px;
    }
    
    #grid > div {
      background-color: lime;
    }

    规范

    Specification

    Status

    Comment

    CSS Grid LayoutThe definition of 'grid-column-gap' 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

    No support3

    No support3

    441

    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

    No support3

    44

    No support

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

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

    导航