cuadrícula-plantilla-filas | Trucos CSS - Trucos CSS

EN grid-template-rows La propiedad CSS es parte de Especificación de diseño de cuadrícula CSSdefinir las filas de un contenedor de red especificando el tamaño de los rieles de red y los nombres de sus filas.

.app-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Una cosa para cubrir antes de saltar grid-template-rows la propiedad es la diferencia entre las líneas de la red y las rutas de la red. Las líneas de cuadrícula se refieren a los nombres de las líneas que definen las columnas y filas de la cuadrícula. Las rutas de red se refieren a la longitud del espacio entre las líneas de red.

Sintaxis

grid-template-rows: 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( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <integer [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>

• Valor inicial: none
• Se refiere a: contenedores de celosía
• heredado: no
• Valor estimado: como se indica, pero con longitudes relativas convertidas a longitudes absolutas
• Tipo de animación: una lista simple de longitud, porcentaje o cálculo, siempre que las únicas diferencias estén en los valores de los componentes de longitud, porcentaje o cálculo en la lista.

Valores

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

/* <track-list> values */
grid-template-rows: 200px 1fr 180px;
grid-template-rows: [linename col1] 250px [line2];
grid-template-rows: [sidebar] 1fr [content] 2fr;
grid-template-rows: fit-content(50%);
grid-template-rows: minmax(200px, 1fr) minmax(100px, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/* <auto-track-list> values */
grid-template-rows: 100px repeat(auto-fill, 100px) 200px;
grid-template-rows: 100px repeat(2, 1fr auto) 200px repeat(3, 5fr);
grid-template-rows: minmax(150px, max-content) repeat(auto-fill, 180px) 15%;
grid-template-rows: [col1] 100px [col1-end] repeat(auto-fit, [line3] 400px);

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial; /* same as `none` */
grid-template-rows: revert;
grid-template-rows: unset;

none

Está defecto valor. El uso de none Cosas de valor grid-template-rows no genera trazas explícitas de la cuadrícula, lo que a su vez significa que las filas son implícitamente generado (es decir, hecho para usted sin tener que expresamente definirlos) y el tamaño de la pista está determinado por grid-auto-rows Propiedad.

Tenga en cuenta que, grid-template-rows no es solamente manera de crear rastros explícitos de filas en la red. También se puede hacer con la ayuda de grid-template-areas una propiedad que permite un área de red que se puede definir con nombres personalizados (p. sidebar, mainy otros.).

La diferencia entre redes implícitas y explícitas está bien resumida en esta publicación de Manuel Matuzovic.

<length>

Este valor puede ser cualquier longitud de CSS válida y no negativa, como px, em y rem por cierto, para especificar el tamaño de la pista (es decir, la altura) de la fila.

<percentage>

Este es un valor no negativo en relación con el tamaño interno del contenedor de celosía. Si el tamaño del contenedor de celosía depende del tamaño de sus pistas, entonces el porcentaje debe tratarse de la misma manera que la declaración. auto.

Una desventaja de usar un valor de porcentaje es que si agrega espacios entre pistas, el tamaño de los espacios se agregará al tamaño de las pistas, lo que puede causar un desbordamiento. fr unidad o auto una palabra clave para dimensionar las canciones y evitar que sucedan.

<flex>

Este es un valor no negativo expresado en fr unidades y le permite crear senderos con una cuadrícula flexible estableciendo el tamaño de la pista como parte de espacio libre De esta manera, a medida que la cuadrícula cambia de altura, las filas cambian, lo que hace que la cuadrícula responda mejor.

Por ejemplo, considere un contenedor de celosía de tres filas que es 900px Digamos que la altura de la primera fila (superior) es fija (es decir, no cambia) en 300px mientras que la segunda fila ocupa una unidad fraccionaria (1fr) y la tercera fila pesa dos unidades fraccionarias2fr):

.grid {
  display: grid;
  height: 900px;
  grid-template-rows: 300px 1fr 2fr;
}

Las segundas dos filas son fraccionarias, por lo que ocuparán cualquier espacio que quede. Y en este caso, el espacio disponible es todo lo que queda después de arreglar la primera fila 300px se toma en cuenta la altura Luego las dos segundas filas dividen al resto de acuerdo a cuantas fracciones reciben.

En este ejemplo, el espacio restante y disponible es 600px (es decir. 900px menos 300px). La segunda fila recibe una fracción (1fr) de este espacio y la tercera fila recibe dos fracciones2fr). Tomemos un momento matemático para calcular la altura de una parte de 600px:

1fr = ([Grid Container Height] - [Fixed Row Height]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px

¡Ajá! es un hígado 200pxY como la segunda fila es 1frtiene que ser 200px también Esto nos deja con 400px espacio disponible (900px - 300px - 200px), lo que simplemente sucede dos veces el tamaño de la segunda fila.

¡Pero espera! Hay más.

Recuerde que la cuadrícula tiene en cuenta cualquier espacio que se haya agregado entre las rutas de la cuadrícula al determinar cuánto espacio está disponible para la distribución de filas fraccionarias. La ventaja aquí, por supuesto, es que nuestras líneas nunca desbordarán el contenedor de la red.

Añadamos un hueco al ejemplo anterior:

.grid {
  display: grid;
  height: 900px;
  grid-template-rows: 300px 1fr 2fr;
  gap: 15px;
}

Aunque una vez declaramos una omisión aquí, en realidad es como lo hemos declarado. dos omisiones Esto se debe a que hay 15px un espacio entre cada fila (uno entre la fila 1 y la fila 2 y otro entre la fila 2 y la fila 3). Eso significa que tenemos 30px valor de los vacíos en nuestra red que deben ser reportados en el espacio disponible.

1fr = ([Grid Container Height] - [Gaps] - [Fixed Row Height]) / [Sum of the flex factors]
1fr = (900px - 30px - 300px) / 3
1fr = 570px / 3
1fr = 190px

No sé a ti, pero a mí no me gusta tener que hacer muchos cálculos manuales. Esto hace que la red CSS sea excelente: ¡lo necesita todo!

minmax(min, max)

EN minmax() la función acepta dos argumentos: valor de longitud mínima y valor máximo. Y qué dice que el contenedor de red es ese grid-template-rows puede no ser más estrecho del valor mínimo, pero no más amplio del valor máximo. Nuestra Guía de funciones de CSS tiene una explicación más profunda y detallada de cómo funciona la función.

Tome el siguiente ejemplo:

grid-template-rows: 200px minmax(100px, 400px);

Aquí hay dos líneas: una es 200px de ancho y otra, que se expresa como minmax(100px, 400px)Se ve raro, ¿no? Pero todo lo que dice es que la segunda línea deber tomar al menos 100px espacio, pero no más de 400px.

Para decirlo más claramente: mientras haya más de 100px de espacio disponible, entonces la segunda fila se puede doblar para 400px pero debe detenerse allí. De lo contrario, es hora 100px ancho.

EN min y max argumentos toman todos los siguientes valores excepto min el valor no puede ser un valor flexible (por ej. 1fr):

<length-percentage> | <flex> | min-content | max-content | auto

Entonces esto no es válido ya que min valor es un valor flexible:

/* 👎 */
grid-template-rows: minmax(1fr, 500px) 3fr;

Pero estos son perfectamente válidos:

/* 👍 */
grid-template-rows: minmax(auto, 1fr) 3fr;
grid-template-rows: minmax(200%, 1fr) 1fr;

auto

EN auto palabra clave se comporta de manera similar a minmax(min-content, max-content) en la mayoría de los casos.

Desde auto las dimensiones de las pistas se pueden estirar desde align-content y justify-content properties, ocuparán el espacio restante en el contenedor de red predeterminado auto-máticamente. Dicho esto, auto el tamaño de las pistas no puede ganar una batalla fr unidades al asignar el espacio restante: se ajustan al tamaño máximo de su contenido.

Echa un vistazo a los resultados de estos dos ejemplos de canciones:

grid-template-rows: auto auto auto;
grid-template-rows: auto 1fr auto;

Cuando las tres filas están configuradas para auto (que también podríamos escribir como repeat(3, auto) - pero más sobre eso más adelante), todo lo que hacen es compartir el mismo espacio. Pero cuando ponemos una unidad fraccionaria en el medio como la segunda fila, auto las líneas son tan anchas como el contenido en ellas y 1fr fila ocupa el espacio restante.

min-content

EN min-content palabra clave representa el mas pequeño la posible cantidad de espacio que un elemento puede ocupar en un contenedor de celosía sin desbordar su contenido. El contenido puede ser textos, imágenes o videos.

Digamos que el contenido es "CSS es genial". Escrito en modo vertical, min-content es la amplitud del mundo "genial" porque es la parte más ancha del contenido (más ancha que "CSS" y "e"). Si la línea se vuelve más estrecha, entonces el texto comienza a llenar el contenedor.

En el código se ve así:

.grid {
  display: grid;
  grid-template-rows: min-content 1fr;
  gap: 1rem;
}

.grid-item {
  writing-mode: vertical-rl;
}

… Lo que lleva a algo como esto:

max-content

EN max-content palabra clave representa tamaño mínimo requerido para un elemento que puede contener todo su contenido sin ser envuelto o abarrotado. Un nombre que incluye "max" suena como si estuviéramos tratando con un tamaño máximo, por lo que este valor puede ser un poco complicado.

Si reconsideramos la nuestra min-content ejemplo anterior, una ruta de red con un valor de tamaño de max-content crecerá mientras su contenido quepa en una fila. Entonces, en el caso de "CSS es genial" max-content sin embargo, hay mucho espacio que estas tres palabras ocupan juntas en una sola línea.

.grid {
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 1rem;
}

fit-content( <length-percentage> )

EN fit-content() la función (hay una explicación sólida en nuestra Guía de funciones de CSS) usa el espacio disponible y acepta un percentage o length valor como el tamaño máximo permitido para la ruta de red mientras se asegura de que la pista nunca exceda max-content y nunca se reduce más allá del mínimoEl mínimo es a menudo, pero no siempre, igual a min-content.

.grid {
  display: grid;
  grid-template-rows: fit-content(400px) fit-content(400px) 1fr;
  gap: 1rem;
}

En la siguiente figura, la primera fila no se extiende más allá max-content tamaño (es decir, el ancho de las palabras "fit-content (400px)" por línea): se extiende solo para ajustarse a su contenido. Sin embargo, la segunda fila tiene mucho más contenido y deja de estirarse una vez que llega a una altura de 400pxque es la restricción establecida en la función:

[linename]

Si bien las líneas de red siempre se pueden especificar con un nombre numérico implícito, también podemos darles nombres personalizados para que el código sea más fácil de entender en una red más compleja. A continuación, se puede especificar cada nombre de fila al colocar elementos de red por nombres de fila.

Las líneas de cuadrícula pueden tener más de un nombre agregando nombres entre corchetes y separando cada uno con un espacio:

grid-template-rows: [first header-start] 100px [header-end content-start] 1fr [lastline];

Tenga en cuenta que el nombre de la línea es un <custom-ident>un tipo de datos común que representa cualquier identificador CSS válido que no será malinterpretada como una palabra clave predefinida en la definición del valor de esta propiedad. Entonces podemos llamar orden super-awesome-spider-monkey siempre que no contenga valores CSS globales que puedan causar conflictos, p. span, auto, inherit, initial y así.

También tales identificadores están completos distinguir mayúsculas de minúsculas. Por ejemplo, CSS trata sidebar-end y Sidebar-Name como dos nombres de línea completamente diferentes y no relacionados. También los nombres de línea se pueden asignar explícitamente con grid-template-rows propiedad, o asignada implícitamente por áreas de red nombradas con grid-template-areas Propiedad.

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

EN repeat() la función es una forma efectiva de definir grid-template-rows cuando las filas son iguales. La función toma el número de filas seguido del tamaño de fila:

/* Writing this */
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

/* is the same as this: */
grid-template-rows: repeat(5, 1fr);

Otro ejemplo, esta vez de la especificación:

grid-template-rows: 10px [row-start] 250px [row-end]
                       10px [row-start] 250px [row-end]
                       10px [row-start] 250px [row-end]
                       10px [row-start] 250px [row-end] 10px;

/* same as above, except easier to write */
grid-template-rows: repeat(4, 10px [row-start] 250px [row-end]) 10px;

auto-fill y auto-fit

Además de un número entero que indica el número de repeticiones, dos palabras clave de auto-fill y auto-fit también se permite que sea el primer argumento de repeat() función.

Estas palabras clave son más apropiadas para columnas que para filas, pero veamos cómo se comportan cuando se aplican a grid-template-rows.

Cuando auto-fill y auto-fit se dan como el número de iteraciones y si el contenedor de red tiene un altura especificada o altura máximaentonces el número de iteraciones es el entero más grande posible que no haga que la red desborde el campo de contenido de su contenedor de red; si se desborda cierto número de repeticiones, entonces hay una repetición.

Por otro lado, si el contenedor de celosía tiene un cierta altura mínimael número de repeticiones es el número entero más pequeño posible que cumple con este requisito mínimo. De lo contrario, la lista de reproducción especificada se repite solo una vez.

Como puede ver en los siguientes ejemplos, si no se define una altura explícita para el contenedor de red, estas palabras clave se aplican solo a la primera fila; de lo contrario, se aplican al número máximo de filas que coincidan con la altura explícita y las que se desborden tendrán auto Talla:

Hay varias restricciones en el uso de repeat() una característica que vale la pena llamar:

• No se puede anidar un repeat() función dentro de un repeat() función.

/* This is invalid */
grid-template-rows: repeat(4, 1fr repeat(5, 1fr));

• No acepta valores de longitud inherentes o flexibles (p. fr unidades) cuando se usa auto-fill o auto-fitSolo acepta el tamaño explícito de la canción, por lo que puede calcular la cantidad de líneas que van al contenedor de red.

/* This is invalid */
grid-template-rows: repeat(auto-fit, 1fr);

• Sin embargo, es bueno usar el tamaño inherente o flexible como el segundo valor de la función, siempre que el primer valor sea un número positivo.

/* These are invalid */
grid-template-rows: repeat(auto-fit, 1fr);
grid-template-rows: repeat(min-content, 1fr);

/* This is valid */
grid-template-rows: repeat(6, 1fr);

• Solo se puede usar una vez en grid-template-rows lista de canciones en uso auto-fill o auto-fit.Podemos usar muchos repeat() funciones, sin embargo, mientras que el segundo valor es fijo.

/* These are invalid */
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(auto-fill, minmax(5rem, auto));
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(3, 1fr);

/* This is valid */
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(3, 200px);

subgrid

¿Podemos tener una cuadrícula? dentro de ¿enrejado? ¡Por supuesto que podemos! esto es gracias a subgrid valor de la palabra clave. Declarar esto permite que la red interna (hija) comparta las líneas de la red externa (principal), lo que permite líneas más consistentes en la ruta sin tener que declararlas nuevamente.

La subred se considera experimental y solo es compatible con Firefox en el momento de escribir este artículo.

Entonces, digamos que tenemos una cuadrícula en la cuadrícula:

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
}
.grid-container .grid-item {
  display: grid;  
}

Podemos convertir esta red anidada en una subgrid para compartir las líneas de ruta con la red principal:

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 1rem;
}
.grid-container .grid-item {
  display: grid;  
  grid-template-rows: subgrid;
}

Ahora los elementos de la red secundaria se colocarán y dimensionarán de acuerdo con el tamaño de la pista del contenedor de la red principal. Por ejemplo, considere el siguiente HTML:

<div class="grid">
  <div class="item"></div>

  <div class="item subgrid">
    <div class="subitem"></div>
    <div class="subitem"></div>
  </div>

  <div class="item"></div>
  <div class="item"></div>
</div>

Ahora hagamos una subred:

 .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Establish a grid with 4 columns */
  grid-template-rows: repeat(4, 1fr); /* Establish a grid with 4 rows */
}
.item {  
  grid-row: 1/-1; /* Make all items as tall as the 4 tracks */
}
.subgrid {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 3/-1; /* Make the subgrid item size, half of the other items */
}

Aquí puede ver que los elementos de la subred se ajustan al tamaño de la pista de la red principal:

Las brechas de subred se heredan del padre, pero esto se puede revertir de manera diferente gap valor del elemento de subred:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1rem; /* This is inherited by the child grid */
}
.grid-container .grid-item {
  display: grid;  
  grid-template-rows: subgrid;
  gap: 0.5rem; /* This overrides the parent grid's gap */
}

La subred tiene sus propios números de línea, por ejemplo, cuando usa un número de línea 1 en su subred, apunta a la primera línea de la red secundaria, no a la red principal. Por lo tanto, incluso si la subred comienza en la tercera línea de la red principal, la primera línea de la subred seguirá siendo 1 y no 3.

Y, por supuesto, podemos declarar nombres de línea personalizados en una red de subred:

.grid-container .grid-item {
  display: grid;  
  grid-template-rows: subgrid [header-start] [header-end] [main-start] [main-last];
}

Ah, y podemos aprovecharlo al máximo. repeat() función aquí para especificar nombres de línea para la ruta:

.grid-container .grid-item {
  display: grid;  
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: subgrid repeat(2, [a] 1fr [b]);
}

Una cosa a tener en cuenta, sin embargo, es que repeat() la función combina todos los nombres de las líneas que están una al lado de la otra.

/* These are equivalent */
grid-template-rows: repeat(2, [a] 1fr [b]);
grid-template-rows: [a] 1fr [b a] 1fr [b];

Tenga en cuenta que no puede tener rutas implícitas en esta dimensión en la subred. Por lo tanto, si agrega más elementos de red a la combinación, se colocarán en las rutas de subred explícitas existentes. Por ejemplo, agregar otro hijo a la subred del ejemplo anterior colocará a este hijo debajo de la última canción.

masonry

¿Sabes lo que queremos decir con albañilería¿derecho? Este es un excelente diseño en el que los elementos de la cuadrícula se organizan de alguna manera y se organizan juntos en función del espacio vertical disponible en la columna. Fue popularizado hace años por Biblioteca de JavaScript de David DeSandro del mismo nombre.

Gracias a CSS Grid, la mampostería será algo que podremos lograr sin recurrir a JavaScript. Sin embargo, en el momento de redactar este informe, esto sigue siendo un resultado importante como parte de Nivel 3 de la especificación CSS Gridque se encuentra actualmente en el borrador del editor. Sin embargo, está disponible en Firefox detrás de una bandera.

Probablemente veremos cambios en la especificación entre ahora y el momento de su lanzamiento real. Pero esto es lo que parece en este momento:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Ejemplos

¡Sí, es hora de una demostración! Tengo algunos ejemplos que muestran las fortalezas de grid-template-rows una propiedad que puede encontrar al trabajar con un diseño de cuadrícula CSS.

diseño de la aplicación

El diseño simplificado de la aplicación se puede lograr con el siguiente CSS:

.layout {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
}

menú de la barra lateral

albañilería

Compatibilidad con navegador

Más información

¡Trucos relacionados!

Conectado