📜  CSS | grid-column-start 属性

📅  最后修改于: 2021-10-29 06:29:38             🧑  作者: Mango

grid-column-start 属性定义从哪个列行项目开始。 grid-column-start 属性有不同的值,不同的值用户可以从任何地方开始。同一个命名块上也有一个特定的值。

句法:

grid-column-start: auto|span n|column-line;

默认值:

  • 汽车

属性值:

auto:一个关键字,指定该属性对网格项的放置没有任何贡献。默认值,项目将按照流程放置

  • 句法:
grid-column-start: auto; 
  • 例子:
html


 

    
        CSS | grid-column-start Property
    
    
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
         
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
         
        .item1 {
            <!-- grid-column-start property
                               with auto value -->
            grid-column-start: auto;
        }
    

 

 
    
        
         The grid-column-start Property
        
        auto value
        the item will be placed
               following the initial flow
   
 
    
        G
        e
        e
        k
        s
        f
        o
        r
        G
        e
        e
        k
        s
    
 

 


html


 

    
        CSS | grid-column-start Property
    
    
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
         
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
         
        .item1 {
            <!-- grid-column-start property
                                with span value -->
            grid-column-start: span 4;
        }
    

 

 
     
        
         The grid-column-start Property
        
        auto value
        the item will be placed following
                           the initial flow
    
    
        G
        e
        e
        k
        s
        f
        o
        r
        G
        e
        e
        k
        s
    
 

 


html


 

    
        CSS | grid-column-start Property
    
    
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
         
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
         
        .item1 {
            <!-- grid-column-start property
                            with column-line value --!>
          grid-column-start: 2;
        }
           
    

 

 
    
        
         The grid-column-start Property
        
        auto value
        the item will be placed following
                            the initial flow
    
    
        G
        e
        e
        k
        s
        f
        o
        r
        G
        e
        e
        k
        s
    
 

 


  • 输出:

span n:关键字指定项目将跨越的列数,如果名称为 a,则仅计算具有该名称的行

  • 句法:
grid-column-start: span n; 
  • 例子:

html



 

    
        CSS | grid-column-start Property
    
    
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
         
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
         
        .item1 {
            <!-- grid-column-start property
                                with span value -->
            grid-column-start: span 4;
        }
    

 

 
     
        
         The grid-column-start Property
        
        auto value
        the item will be placed following
                           the initial flow
    
    
        G
        e
        e
        k
        s
        f
        o
        r
        G
        e
        e
        k
        s
    
 

 

  • 输出:

column-line:关键字 指定在哪一列开始显示item,用户可以设置开始列。

  • 句法:
grid-column-start: column-line; 
  • 例子:

html



 

    
        CSS | grid-column-start Property
    
    
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
         
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
         
        .item1 {
            <!-- grid-column-start property
                            with column-line value --!>
          grid-column-start: 2;
        }
           
    

 

 
    
        
         The grid-column-start Property
        
        auto value
        the item will be placed following
                            the initial flow
    
    
        G
        e
        e
        k
        s
        f
        o
        r
        G
        e
        e
        k
        s
    
 

 

  • 输出:

支持的浏览器: grid-column-start 属性支持的浏览器如下:

  • 谷歌浏览器 57.0
  • 浏览器 16.0
  • 火狐 52.0
  • Safari 10.0
  • 歌剧 44.0