Definición de .grid-template-columns aplicado en CSS
La propiedad CSS .grid-template-columns es parte de la especificación de diseño de cuadrícula CSS, definiendo las columnas de un contenedor de cuadrícula especificando el tamaño de las pistas de la cuadrícula y sus nombres de línea.
Ejemplo de empleo : propiedad CSS grid-template-columns
Si te gustaría utilizar esta propiedad de CSS en tu hoja de estilos, hazlo de esta manera:
.sidebar-layout {
display: grid;
grid-template-columns: 300px 1fr;
}Sintaxis de .grid-template-columns en CSS
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| ninguna | Valor por defecto. Las columnas se crean si es necesario | |
| auto | El tamaño de las columnas está determinado por el tamaño del contenedor y por el tamaño del contenido de los elementos de la columna. | |
| contenido máximo | Establece el tamaño de cada columna para que dependa del elemento más grande de la columna | |
| contenido mínimo | Establece el tamaño de cada columna para que dependa del elemento más pequeño de la columna | |
| longitud | Establece el tamaño de las columnas, utilizando un valor de longitud legal. | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .grid-template-columns
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| grid-template-rows | 57 | 16 | 52 | 10 | 44 |
