CSS grid-auto-flow用法及代码示例

grid-auto-flow属性精确指定auto-placed项目如何流入网格。

用法:

grid-auto-flow:row|column|row dense|column dense;

行：auto-placement算法通过依次填充每一行并根据需要添加新行来放置项目。

用法:

grid-auto-flow:row;

示例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS grid-auto-flow Property 
    </title> 
      
    <style> 
        .main { 
            height:200px; 
            width:200px; 
            display:grid; 
            grid-gap:10px; 
            grid-template:repeat(4, 1fr) / repeat(2, 1fr); 
  
            /* grid-auto-flow property used here */ 
            grid-auto-flow:row; 
        } 
          
        .Geeks1 { 
            background-color:red; 
            grid-row-start:3; 
        } 
          
        .Geeks2 { 
            background-color:blue; 
        } 
          
        .Geeks3 { 
            background-color:black; 
        } 
          
        .Geeks4 { 
            grid-column-start:2; 
            background-color:orange; 
        } 
    </style> 
</head> 
  
<body> 
    <div class = "main">  
        <div class = "Geeks1"></div>  
        <div class = "Geeks2"></div>  
        <div class = "Geeks3"></div>  
        <div class = "Geeks4"></div>  
    </div>  
</body> 
  
</html>

输出：

柱：auto-placement算法通过依次填充每一列并根据需要添加新列来放置项目。

用法:

    grid-auto-flow:column;

示例2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS grid-auto-flow Property 
    </title> 
      
    <style> 
        .main { 
            height:200px; 
            width:200px; 
            display:grid; 
            grid-gap:10px; 
            grid-template:repeat(4, 1fr) / repeat(2, 1fr); 
              
            /* grid-auto-flow property used here */ 
            grid-auto-flow:column; 
        } 
          
        .Geeks1 { 
            background-color:red; 
            grid-row-start:3; 
        } 
          
        .Geeks2 { 
            background-color:blue; 
        } 
          
        .Geeks3 { 
            background-color:black; 
        } 
          
        .Geeks4 { 
            grid-column-start:2; 
            background-color:orange; 
        } 
    </style> 
</head> 
  
<body> 
    <div class = "main">  
        <div class = "Geeks1"></div>  
        <div class = "Geeks2"></div>  
        <div class = "Geeks3"></div>  
        <div class = "Geeks4"></div>  
    </div>  
</body> 
  
</html>

输出：

列密度：指定auto-placement算法对列使用“dense”打包算法。

用法:

   grid-auto-flow:column dense;

示例3：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS grid-auto-flow Property 
    </title> 
      
    <style> 
        .main { 
            height:200px; 
            width:200px; 
            display:grid; 
            grid-gap:10px; 
            grid-template:repeat(4, 1fr) / repeat(2, 1fr); 
              
            /* grid-auto-flow property used here */ 
            grid-auto-flow:column dense; 
        } 
          
        .Geeks1 { 
            background-color:red; 
            grid-row-start:3; 
        } 
          
        .Geeks2 { 
            background-color:blue; 
        } 
          
        .Geeks3 { 
            background-color:black; 
        } 
          
        .Geeks4 { 
            grid-column-start:2; 
            background-color:orange; 
        } 
    </style> 
</head> 
  
<body> 
    <div class = "main">  
        <div class = "Geeks1"></div>  
        <div class = "Geeks2"></div>  
        <div class = "Geeks3"></div>  
        <div class = "Geeks4"></div>  
    </div>  
</body> 
  
</html>

输出：

行密集：指定auto-placement算法对行使用“dense”打包算法。
用法:

   grid-auto-flow:row dense;

示例4：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS grid-auto-flow Property 
    </title> 
      
    <style> 
        .main { 
            height:200px; 
            width:200px; 
            display:grid; 
            grid-gap:10px; 
            grid-template:repeat(4, 1fr) / repeat(2, 1fr); 
              
            /* grid-auto-flow property used here */ 
            grid-auto-flow:row dense; 
        } 
          
        .Geeks1 { 
            background-color:red; 
            grid-row-start:3; 
        } 
          
        .Geeks2 { 
            background-color:blue; 
        } 
          
        .Geeks3 { 
            background-color:black; 
        } 
          
        .Geeks4 { 
            grid-column-start:2; 
            background-color:orange; 
        } 
    </style> 
</head> 
  
<body> 
    <div class = "main">  
        <div class = "Geeks1"></div>  
        <div class = "Geeks2"></div>  
        <div class = "Geeks3"></div>  
        <div class = "Geeks4"></div>  
    </div>  
</body> 
  
</html>

输出：

支持的浏览器：CSS | grid-auto-flow属性列出如下：

谷歌浏览器57
Mozilla Firefox 52
边16
Safari 10
Opera 44

相关用法

注：本文由纯净天空筛选整理自A_K_Mishra大神的英文原创作品 CSS | grid-auto-flow Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。