CSS | propiedad grid-auto-flow

La propiedad grid-auto-flow Especifica exactamente cómo los elementos colocados automáticamente fluyen hacia la cuadrícula.

Sintaxis:

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

Fila: el algoritmo de colocación automática coloca elementos, llenando cada fila a su vez, agregando nuevas filas según sea necesario.

Sintaxis:

grid-auto-flow: row;

Ejemplo 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>                        

Producción:

Columna: el algoritmo de colocación automática coloca elementos, llenando cada columna a su vez, agregando nuevas columnas según sea necesario.

Sintaxis:

    grid-auto-flow: column;

Ejemplo-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>                    

Producción:

Columna densa: especificando que el algoritmo de colocación automática utiliza un algoritmo de empaquetado «denso» para la columna.

Sintaxis:

   grid-auto-flow: column dense;

Ejemplo-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>                    

Producción:

Fila densa: especificando que el algoritmo de colocación automática utiliza un algoritmo de empaquetado «denso» para las filas.
Sintaxis:

   grid-auto-flow: row dense;

Ejemplo-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>                                

Producción:

Navegadores compatibles: El navegador compatible con CSS | Las propiedades de grid-auto-flow se enumeran a continuación:

Google cromo 57
MozillaFirefox 52
Borde 16
Safari 10.1
Ópera 44

Publicación traducida automáticamente

Artículo escrito por A_K_Mishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta