CSS | propiedad grid-template-columns

La propiedad grid-template-columns en CSS se utiliza para establecer el número de columnas y el tamaño de las columnas de la cuadrícula. Esta propiedad acepta más de un valor. El número de columnas se establece por el número de valores dados a esta propiedad. 

Sintaxis:

grid-template-columns: none|auto|max-content|min-content|length|
initial|inherit;

Valores de propiedad:

  • none: Es el valor por defecto de la propiedad grid-template-columns. La cuadrícula no contiene ninguna columna a menos que sea necesario. 

Sintaxis:

grid-template-columns: none;
  • length: Establece la propiedad grid-template-columns en longitud. La longitud se puede establecer en forma de px, em, porcentaje, etc. especifica el tamaño de las columnas. 

Sintaxis:

grid-template-columns: length;
  • automático: el tamaño de las columnas se establece automáticamente según el contenido y el tamaño del elemento. 

Sintaxis:

grid-template-columns: auto;
  • min-content: establece el tamaño de la columna en función del tamaño de contenido mínimo más grande. 

Sintaxis:

grid-template-columns: min-content;
  • max-content: establece el tamaño de la columna en función del tamaño de contenido máximo más grande. 

Sintaxis:

grid-template-columns: max-content;
  • initial: establece la propiedad grid-template-columns en el valor predeterminado. 

Sintaxis:

grid-template-columns: initial;
  • heredar: Establece la propiedad grid-template-columns de su elemento padre. 

Sintaxis:

grid-template-columns: inherit;

Ejemplo 1: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS grid-template-columns Property
        </title>
         
        <style>
            .geeks {
                background-color:green;
                padding:30px;
                display: grid;
                grid-template-columns: auto auto 200px 150px;
                grid-gap: 10px;
            }
            .GFG {
                background-color: white;
                border: 1px solid white;
                font-size: 30px;
                text-align: center;
            }
        </style>
    </head>
     
    <body>
        <div class="geeks">
            <div class="GFG">A</div>
            <div class="GFG">B</div>
            <div class="GFG">C</div>
            <div class="GFG">D</div>
            <div class="GFG">E</div>
            <div class="GFG">F</div>
            <div class="GFG">G</div>
            <div class="GFG">H</div>
        </div>
    </body>
</html>                   

Producción:

 CSS grid-template-columns example1 gfg 

Ejemplo 2: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS grid-template-columns Property
        </title>
         
        <style>
            .geeks {
                background-color:green;
                padding:30px;
                display: grid;
                grid-template-columns:
                min-content max-content 400px min-content;
                grid-gap: 10px;
            }
            .GFG {
                background-color: white;
                border: 1px solid white;
                font-size: 30px;
                text-align: center;
            }
        </style>
    </head>
     
    <body>
        <div class="geeks">
            <div class="GFG">Geeks</div>
            <div class="GFG">GFG</div>
            <div class="GFG">C</div>
            <div class="GFG">D</div>
            <div class="GFG">E</div>
            <div class="GFG">F</div>
            <div class="GFG">G</div>
            <div class="GFG">H</div>
        </div>
    </body>
</html>                   

Producción:

 CSS grid-template-columns example2 

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

  • Google Chrome 57.0 y superior
  • Borde 16.0 y superior
  • Internet Explorer 10.0 y superior
  • Firefox 52.0 y superior
  • Ópera 44.0 y superior
  • Safari 10.1 y superior

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *