Propiedad CSS grid-template-columns
Ejemplo
Haga un contenedor de cuadrícula de 4 columnas:
.grid-container {
display: grid;
grid-template-columns:
auto auto auto auto;
}
Definición y uso
La grid-template-columns
propiedad especifica el número (y el ancho) de las columnas en un diseño de cuadrícula.
Los valores son una lista separada por espacios, donde cada valor especifica el tamaño de la columna respectiva.
Valor por defecto: | ninguna |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | Módulo de diseño de cuadrícula CSS Nivel 1 |
Sintaxis de JavaScript: | objeto .style.gridTemplateColumns="50px 50px 50px" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
grid-template-columns | 57 | 16 | 52 | 10 | 44 |
Sintaxis CSS
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
none | Default value. Columns are created if needed | |
auto | The size of the columns is determined by the size of the container and on the size of the content of the items in the column | |
max-content | Sets the size of each column to depend on the largest item in the column | |
min-content | Sets the size of each column to depend on the smallest item in the column | |
length | Sets the size of the columns, by using a legal length value. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Cree un contenedor de cuadrícula de 4 columnas y especifique un tamaño para cada columna:
.grid-container {
display: grid;
grid-template-columns:
30px 200px auto 100px;
}
páginas relacionadas
Tutorial de CSS: diseño de cuadrícula CSS
Referencia de CSS: la propiedad grid-template-rows
Referencia de CSS: la propiedad grid-template