• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • grid-column-end

    版本:CSS3

    grid-column-end CSS属性指定网格项在网格列中的结束位置,方法是为网格项的网格位置提供一条线、一个跨距或无任何内容(自动),从而指定网格区域的块结束边缘。

    示例

    /* Keyword value */
    grid-column-end: auto;
    
    /* <custom-ident> values */
    grid-column-end: somegridarea;
    
    /* <integer> + <custom-ident> values */
    grid-column-end: 2;
    grid-column-end: somegridarea 4;
    
    /* span + <integer> + <custom-ident> values */
    grid-column-end: span 3;
    grid-column-end: span somegridarea;
    grid-column-end: 5 somegridarea span;
    
    /* Global values */
    grid-column-end: inherit;
    grid-column-end: initial;
    grid-column-end: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE不支持grid-column-end,其余浏览器都支持grid-column-end

    语法

    grid-column-end:auto| <custom-ident>|[<integer>&&<custom-ident>?] |[ span &&[ <integer>||<custom-ident>] ]

    取值

    • auto:表示对网格的布置行为不做干涉,即自动布置,自动的 span 或者默认 span 值为 1。
    • <custom-ident>:如果存在自定义的基线名('<custom-ident>-start'/'<custom-ident>-end'),它就将第一个这样的基线贡献给网格单元。
    • <integer>&&<custom-ident>?:将第 n 条网格基线贡献给网格单元布置。如果指定的是负数,则指的是从下边界向上边界计算的反向顺序。如果提供的是<custom-ident>,那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数,为了找到该位置,所有隐式的网格线会被假定拥有这个命名。integer 值不能为 0。
    • span &&[ <integer>||<custom-ident>:为网格单元定义一个跨度,使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是<custom-ident>,则只有以此命名的基线才会被计算。如果网格线不足,则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。如果忽略<integer>,它就默认设为 1。它的值也不能为0。

    实例

    .wrapper { 
      display: grid; 
      grid-template-columns: repeat(3, 1fr); 
      grid-auto-rows: 100px; 
    } 
    
    .box1 { 
      grid-column-start: 1; 
      grid-column-end: 4; 
      grid-row-start: 1; 
      grid-row-end: 3; 
    }
    
    .box2 { 
      grid-column-start: 1; 
      grid-row-start: 3; 
      grid-row-end: 5; 
    }
    
    
    <div class="wrapper">
      <div class="box1">One</div>
      <div class="box2">Two</div>
      <div class="box3">Three</div>
      <div class="box4">Four</div>
      <div class="box5">Five</div>
    </div>
    

    上篇:grid-column-start

    下篇:grid-area