Ejemplo de CSS grid-template-rows

los grid-template-rows La propiedad CSS define los nombres de línea y las funciones de tamaño de la pista de la filas de cuadrícula.

Sintaxis

/* Keyword value */
grid-template-rows: none;

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/* <auto-track-list> values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-rows: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

Esta propiedad puede especificarse como:

• ya sea el valor de la palabra clave none
• o un <track-list> valor
• o un <auto-track-list> valor.

Valores

none

Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier fila se generará implícitamente y su tamaño será determinado por el grid-auto-rows propiedad.

[linename]

A <custom-ident> especificando un nombre para la línea en esa ubicación. El ident puede ser cualquier cadena válida que no sean las palabras reservadas span y auto. Las líneas pueden tener varios nombres separados por un espacio dentro de los corchetes, por ejemplo [line-name-a line-name-b].

<length>

Es una longitud no negativa.

<percentage>

Es un no negativo <percentage> valor, relativo al tamaño de bloque del contenedor de cuadrícula. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus pistas, entonces el porcentaje debe tratarse como auto.
Las contribuciones de tamaño intrínseco de la pista se pueden ajustar al tamaño del contenedor de la cuadrícula y aumentar el tamaño final de la pista en la cantidad mínima que resultaría en respetar el porcentaje.

<flex>

Es una dimensión no negativa con la unidad. fr especificando el factor de flexión de la pista. Cada <flex>-la pista de tamaño toma una parte del espacio restante en proporción a su factor de flexión. Al aparecer fuera de un minmax() notación, implica un mínimo automático (es decir, minmax(auto, <flex>)).

max-content

Es una palabra clave que representa la mayor contribución de contenido máxima de los elementos de la cuadrícula que ocupan la pista de la cuadrícula.

min-content

Es una palabra clave que representa la mayor contribución de contenido mínimo de los elementos de la cuadrícula que ocupan la pista de la cuadrícula.

minmax(min, max)

Es una notación funcional que define un rango de tamaño, mayor o igual a min, y menor o igual a max. Si max es más pequeña que min, luego max se ignora y la función se trata como min. Como máximo, un <flex> value establece el factor de flexión de la pista. No es válido como mínimo.

auto

Como máximo representa el mayor max-content tamaño de los elementos de esa pista.

Como mínimo representa el tamaño mínimo más grande de elementos en esa pista (especificado por el min-width/min-height de los artículos). Esto es a menudo, aunque no siempre, el min-content Talla.

Si se usa fuera de minmax() notación, auto representa el rango entre el mínimo y el máximo descrito anteriormente. Esto se comporta de manera similar a min-content(min-content,max-content) en la mayoría de los casos.

Nota:

auto tamaños de pista (y solo auto tamaños de pista) se puede estirar por el align-content y justify-content propiedades. Por lo tanto, por defecto, un auto la pista de tamaño ocupará cualquier espacio restante en el contenedor de la cuadrícula.

fit-content( [ <length> | <percentage> ] )

Representa la fórmula min(max-content, max(auto, argument)), que se calcula de forma similar a auto (es decir minmax(auto, max-content)), excepto que el tamaño de la pista se fija en argumento si es mayor que el auto mínimo.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Representa un fragmento repetido de la lista de pistas, lo que permite escribir en una forma más compacta un gran número de filas que presentan un patrón recurrente.

masonry Esta es una API experimental que no debe usarse en código de producción.

El valor de mampostería indica que este eje debe trazarse de acuerdo con el algoritmo de mampostería.

subgrid

los subgrid El valor indica que la cuadrícula adoptará la parte expandida de su cuadrícula principal en ese eje. En lugar de especificarse explícitamente, los tamaños de las filas / columnas de la cuadrícula se tomarán de la definición de la cuadrícula principal.

Nota

los masonry El valor es del Nivel 3 de la especificación Grid y actualmente solo tiene una implementación experimental detrás de una bandera en Firefox.

los subgrid El valor es del Nivel 2 de la especificación Grid y actualmente solo tiene implementación en Firefox 71 y posteriores.

Definicion formal

Sintaxis formal

none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
where 
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> = [ <line-names> | <name-repeat> ]+




where 
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
where 
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>
where 
<length-percentage> = <length> | <percentage>

Ejemplos de

Especificar tamaños de fila de la cuadrícula

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Resultado

Especificaciones

Compatibilidad del navegador

Ver también

• Propiedades CSS relacionadas: grid-template-columns, grid-template-areas, grid-template
• Guía de diseño de cuadrícula: Conceptos básicos de diseño de cuadrícula – Pistas de cuadrícula
• Video tutorial: Definiendo una cuadrícula
• Subcuadrícula