Atributo CSS grid-template-rows

Definición y uso

grid-template-rows define el número de filas (y la altura) en el diseño de rejilla.

Los valores son listas separadas por espacios, donde cada valor especifica la altura de la fila correspondiente.

Vea también:

Tutorial de CSSDiseño de rejilla CSS

Manual de referencia de CSSPropiedad grid-columns

Manual de referencia de CSSPropiedad grid-template

Ejemplo

Defina el tamaño de la fila (altura):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
none No se ha configurado el tamaño. Cree filas cuando sea necesario.
auto El tamaño de la fila depende del tamaño del contenedor y del contenido del elemento en la fila.
max-content Establezca el tamaño de cada fila según el contenido máximo del elemento en la fila.
min-content Establezca el tamaño de cada fila según el contenido mínimo del elemento en la fila.
length Configure el tamaño de las filas, utilizando valores de longitud válidos. ConsulteUnidad de longitud.

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: Admite. Consulte:Atributos relacionados con la animación.
Versión: Módulo de Layout de Grid CSS Nivel 1
Sintaxis de JavaScript: object.style.gridTemplateRows="50px 200px"

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44