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