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