CSS | propiedad grid-auto-columns

La propiedad grid-auto-columns en CSS se usa para especificar el tamaño de las columnas de los contenedores grid generados implícitamente.

Sintaxis:

grid-auto-columns: auto|max-content|min-content|length|
percentage|minmax(min, max)|initial|inherit;

Valores de propiedad:

auto: Es el valor por defecto. El tamaño se determina implícitamente según el tamaño del contenedor.

Ejemplo 1:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS grid-auto-column Property 
        </title> 
            
        <style> 
            .main { 
                display: grid; 
                grid-template-areas: "a a"; 
                grid-gap: 20px; 
                padding: 30px; 
                background-color: green;
                grid-auto-columns:  auto;
                
            } 
            .GFG { 
                text-align: center; 
                font-size: 35px; 
                background-color: white; 
                padding: 20px 0; 
            } 
        </style> 
    </head> 
        
    <body> 
        <div class = "main"> 
            <div class = "GFG">1</div> 
            <div class = "GFG">2</div> 
            <div class = "GFG">3</div> 
            <div class = "GFG">4</div> 
            <div class = "GFG">5</div> 
        </div> 
    </body> 
</html> 

Producción:

longitud: se utiliza para especificar el tamaño como longitud entera. No se permiten valores negativos.

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS grid-auto-column Property 
        </title> 
            
        <style> 
            .main { 
                display: grid; 
                grid-template-areas: "a a"; 
                grid-gap: 20px; 
                padding: 30px; 
                background-color: green;
                grid-auto-columns: 8.5cm;
                
            } 
            .GFG { 
                text-align: center; 
                font-size: 35px; 
                background-color: white; 
                padding: 20px 0; 
            } 
        </style> 
    </head> 
        
    <body> 
        <div class = "main"> 
            <div class = "GFG">1</div> 
            <div class = "GFG">2</div> 
            <div class = "GFG">3</div> 
            <div class = "GFG">4</div> 
            <div class = "GFG">5</div> 
        </div> 
    </body> 
</html> 

Producción:

porcentaje: Especifica el tamaño como valor porcentual.

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS grid-auto-column container Property 
        </title> 
            
        <style> 
            .main { 
                display: grid; 
                grid-template-areas: "a a"; 
                grid-gap: 20px; 
                padding: 30px; 
                background-color: green;
                grid-auto-columns:  30%;
                
            } 
            .GFG { 
                text-align: center; 
                font-size: 35px; 
                background-color: white; 
                padding: 20px 0; 
            } 
        </style> 
    </head> 
        
    <body> 
        <div class = "main"> 
            <div class = "GFG">1</div> 
            <div class = "GFG">2</div> 
            <div class = "GFG">3</div> 
            <div class = "GFG">4</div> 
            <div class = "GFG">5</div> 
        </div> 
    </body> 
</html> 

Producción:

max-content: Especifica el tamaño en función del elemento más grande del contenedor.
min-content: Especifica el tamaño en función del elemento más pequeño del contenedor.

minmax(min, max): Especifica el tamaño en el rango de [min, max]. mayor o igual a min y menor o igual a max.

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS grid-auto-column Property 
        </title> 
            
        <style> 
            .main { 
                display: grid; 
                grid-template-areas: "a a"; 
                grid-gap: 20px; 
                padding: 30px; 
                background-color: green;
                grid-auto-columns:  minmax(100px, 4cm);
                
            } 
            .GFG { 
                text-align: center; 
                font-size: 35px; 
                background-color: white; 
                padding: 20px 0; 
            } 
        </style> 
    </head> 
        
    <body> 
        <div class = "main"> 
            <div class = "GFG">1</div> 
            <div class = "GFG">2</div> 
            <div class = "GFG">3</div> 
            <div class = "GFG">4</div> 
            <div class = "GFG">5</div> 
        </div> 
    </body> 
</html> 

Producción:

initial: establece la propiedad grid-auto-columns en su valor predeterminado.

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS grid-auto-column Property 
        </title> 
            
        <style> 
            .main { 
                display: grid; 
                grid-template-areas: "a a"; 
                grid-gap: 20px; 
                padding: 30px; 
                background-color: green;
                grid-auto-columns: initial;
                
            } 
            .GFG { 
                text-align: center; 
                font-size: 35px; 
                background-color: white; 
                padding: 20px 0; 
            } 
        </style> 
    </head> 
        
    <body> 
        <div class = "main"> 
            <div class = "GFG">1</div> 
            <div class = "GFG">2</div> 
            <div class = "GFG">3</div> 
            <div class = "GFG">4</div> 
            <div class = "GFG">5</div> 
        </div> 
    </body> 
</html> 

Producción:

heredar: Establece la propiedad grid-auto-columns de su elemento padre.

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS grid-auto-column Property 
        </title> 
            
        <style> 
            .main { 
                display: grid; 
                grid-template-areas: "a a"; 
                grid-gap: 20px; 
                padding: 30px; 
                background-color: green;
                grid-auto-columns:  inherit;
                
            } 
            .GFG { 
                text-align: center; 
                font-size: 35px; 
                background-color: white; 
                padding: 20px 0; 
            } 
        </style> 
    </head> 
        
    <body> 
        <div class = "main"> 
            <div class = "GFG">1</div> 
            <div class = "GFG">2</div> 
            <div class = "GFG">3</div> 
            <div class = "GFG">4</div> 
            <div class = "GFG">5</div> 
        </div> 
    </body> 
</html> 

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad grid-auto-columns se enumeran a continuación:

cromo 57.0
Borde 16.0
Firefox 52.0
Safari 10.0
Ópera 44.0

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta