Grid-auto-filas | Trucos CSS - Trucos CSS

Los grid-auto-rows La propiedad CSS es parte de la Especificación de diseño de cuadrícula CSSespecificando el tamaño de la cuadrícula rows que se crean sin tener un tamaño explícito. En otras palabras, esta propiedad establece el tamaño de las filas implícitas y todas las demás filas que no se han dimensionado explícitamente en grid-template-rows Propiedad.

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail"
                       "media detail detail";
  grid-template-rows: 200px;
  grid-auto-rows: 150px;
}

Este ejemplo crea un contenedor de red con dos líneas definidas por grid-template-areasLa primera fila tiene un tamaño explícito establecido por grid-template-rowspero no la segunda línea. aquí es donde grid-auto-rows ingresa y establece el tamaño de esta fila para 150px.

grid-auto-rows casos de uso

Como dijimos arriba, grid-auto-rows establece el tamaño de todas las filas que no tienen un tamaño explícito. Ahora la pregunta es, ¿qué filas no tienen un tamaño explícito? ¿O cómo crea la cuadrícula filas sin un tamaño explícito?

Aquí hay algunas situaciones en las que esto puede suceder.

Filas definidas por grid-template-areas que no tienen un tamaño explícito establecido por grid-template-rows

El primer caso es el que vimos al principio de este artículo. Una red puede tener un orden explícito definido por grid-template-areas sin que su tamaño sea establecido explícitamente por grid-template-rows Propiedad.

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail"
                       "media detail detail"; /* 2 rows */
  grid-template-rows: 200px; /* 1 size */
}

La primera fila está configurada para 200pxy dado que la última fila no tiene un tamaño explícito, se establecerá en autoPor lo tanto, en este ejemplo, la segunda fila no tiene contenido auto es igual al tamaño cero.

Si sumamos y grid-auto-rows al ejemplo anterior también podemos controlar el tamaño de la última línea:

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail"
                       "media detail detail";
  grid-template-rows: 200px;
  grid-auto-rows: 150px;
}

/* Make sure grid items expand to the second row */
.grid-items {
  grid-row: 1/3;
}

Ahora, como puede ver en la siguiente imagen, el tamaño de la última fila se establece en 150px:

Tenga en cuenta que las canciones que no tienen una medida clara son auto-Talla.

Las filas implícitas se crean cuando hay más elementos de cuadrícula que celdas

Una red definida por grid-template-columns, grid-template-rows o y grid-template-areas se llama un red transparentelo que significa que todas las rutas de la cuadrícula tienen un tamaño determinado. Digamos, por ejemplo, que tenemos seis elementos HTML secundarios en un contenedor de cuadrícula principal y definimos explícitamente tres columnas y dos filas en la cuadrícula.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
}

Tenemos cuadrículas implícitas para estas columnas y filas porque no hay información de tamaño. Solo el número de columnas y el número de filas.

Una situación en la que encontrará filas implícitas es cuando hay más elementos de cuadrícula que filas definidas. Imagine en nuestro último ejemplo que ahora tenemos más de 6 elementos HTML. Anteriormente, configuramos tres columnas y dos filas, por lo que hay exactamente 6 celdas en la cuadrícula, la cantidad perfecta para nuestros 6 elementos. Pero con más de 6 elementos, de repente tenemos un problema de desbordamiento, ¿no?

¡De nada! CSS Grid algoritmo de colocación automática crea filas o columnas adicionales para almacenar los elementos adicionales. Estas columnas y filas adicionales se denominan rastros implícitos.

De forma predeterminada, el algoritmo de colocación automática crea trazos de fila para contener elementos adicionales, por lo que nuestra cuadrícula puede adaptarse a todo, sin importar cuántos elementos le arrojemos.

Sin embargo, el tamaño de las filas implícitas se ajusta automáticamente en función de su contenido. es por eso grid-auto-rows es muy útil: podemos dar un tamaño a todas estas filas y CSS Grid dejará de llenar las filas cuando llegue al último elemento.

Digamos que dimensionamos estas filas implícitas de la cuadrícula para 150px:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-auto-rows: 150px;
}

Ahora, no importa cuántas filas implícitas se creen, todas tendrán un tamaño establecido 150px.

Las filas implícitas se crean cuando colocamos un elemento fuera de la cuadrícula explícita

Otro escenario donde grid-auto-rows La propiedad es útil cuando se crean trazas implícitas cuando colocamos un elemento fuera de la cuadrícula explícita. Los rastros implícitos se crean automáticamente para dejar espacio para este elemento.

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* 3 explicit columns */
  grid-template-rows: 150px; /* 1 explicit row */
  grid-auto-rows: 150px; /* Size of the implicit rows */
}

.grid-item:last-child {
  grid-column: 5;
  grid-row: 3; /* Placed in 3rd row in a 1-row grid */
}

Entonces, lo que hicimos allí se configuró al final .grid-item niño en la tercera fila... ¡pero no hay una tercera fila en nuestra cuadrícula de una fila! Esto coloca el último elemento de la cuadrícula fuera de la cuadrícula explícita, lo que crea dos trazos de línea implícitos. Aunque estas líneas están creadas para nosotros, podemos configurarlas para nosotros mismos. 150px usando grid-auto-rows Propiedad.

Sintaxis

grid-auto-rows: <track-size>+

where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

where
<length-percentage> = <length> | <percentage>

• Valor inicial: auto
• Se refiere a: contenedores de red
• Heredado: no
• Valor calculado: como se especifica, pero con longitudes relativas convertidas a longitudes absolutas
• Porcentajes: se refiere a la dimensión del área correspondiente con contenido
• Tipo de animación: si las longitudes de la lista coinciden, por tipo valor calculado para el elemento c lista de pistas estimada; discreto por lo demás

Múltiples tamaños de pista

Podemos establecer múltiples tamaños de fila para cuadrículas usando el grid-auto-rows En este caso, el tamaño de varias pistas funciona como un patrón y se repite según sea necesario.

.grid-container {
  display: grid;
  grid-template-rows: 50px 50px;
  grid-auto-rows: 40px 60px 80px;
}

.grid-item:last-child {
  grid-row: 8;
}

Aquí movemos el último elemento secundario de nuestra cuadrícula fuera de las filas explícitas y nuestra cuadrícula crea filas implícitas para contener ese elemento como resultado. Esta red tiene dos líneas explícitas (50px 50px) y como el último elemento quiere estar en la octava fila (grid-row: 8), seis filas implícitas se generan automáticamente en la cuadrícula.

los grid-auto-rows establece el tamaño de la primera fila implícita de 40pxel segundo a 60px y tercera fila para 80pxComo tenemos más de tres filas implícitas, nuestra red repite este patrón para dimensionarlas.

Si tuviéramos una fila implícita más, ¿cuál sería el tamaño de esa fila?

Valores

los grid-auto-rows los valores son casi los mismos que los valores de la propiedad grid-template-rows, excepto en grid-auto-rows no puede usar los siguientes valores:

• none
• [linename]
• repeat()
• subgrid
• masonry

/* Keyword values */
grid-auto-rows: auto;
grid-auto-rows: min-content;
grid-auto-rows: max-content;

/* single track-size values */
grid-auto-rows: 200px;
grid-auto-rows: 30vmin;
grid-auto-rows: 50%;
grid-auto-rows: 1.5fr;
grid-auto-rows: minmax(100px, 2fr);
grid-auto-rows: minmax(min-content, 1fr);
grid-auto-rows: fit-content(15rem);

/* multiple track-size values */
grid-auto-rows: 100px 1fr;
grid-auto-rows: 200px min-content 1fr;
grid-auto-rows: 100px 200px 50px 10%;
grid-auto-rows: minmax(100px, auto) auto max-content fit-content(200px);

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

<length>

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

<percentage>

Este es un valor no negativo relativo al tamaño integrado interno del contenedor de red. Si el tamaño del contenedor de red 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 palabra clave para dimensionar las pistas y evitar que esto suceda.

<flex>

Es un valor no negativo expresado en fr unidades y le permite crear cuadrículas flexibles configurando el tamaño de la pista como parte de espacio libre en el contenedor de rejilla. De esta forma, cuando la cuadrícula cambia de altura, las filas también cambian, lo que hace que la cuadrícula responda mejor.

Por ejemplo, considere un contenedor de red que es 900px alto y tiene tres filas implícitas. 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 fraccionarias (2fr):

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

Las dos segundas filas son parciales, por lo que ocuparán el espacio disponible restante. Y en este caso, el espacio disponible es todo lo que queda después de arreglar la primera fila 300px se tiene en cuenta la altura Luego, las dos segundas filas dividen lo que queda de acuerdo con la cantidad de fracciones que obtienen.

En este ejemplo, el espacio restante y disponible es 600px (es decir 900px menos 300pxLa segunda fila obtiene una fracción (1fr) de este espacio y la tercera fila obtiene dos fracciones (2fr). Hagamos un poco de matemáticas por un momento para encontrar la altura de una parte de la 600px:

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

¡Ajá! es una fracción 200pxY como la segunda línea es 1frtiene que ser 200px así como Esto nos deja con 400px de espacio disponible (900px – 300px – 200px), lo cual sucede dos veces el tamaño de la segunda línea.

minmax(min, max)

los minmax() La función toma dos argumentos: un valor de longitud mínima y un valor de longitud máxima. Y lo que le dice a un contenedor de red es que grid-auto-rows podría ser no más alto del valor mínimo, pero no corto del valor máximo. Nuestra Guía de funciones CSS tiene una explicación más profunda y detallada de cómo funciona la función.

Tome el siguiente ejemplo:

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

Aquí hay dos líneas: una es 200px alto y otro que se expresa como minmax(100px, 400px)Parece 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.

En palabras más sencillas: mientras haya más de 100px del espacio disponible, entonces la segunda fila se puede doblar para 400px pero tengo que parar ahí. De lo contrario, es el orden. 100px alto.

los min y max argumentos toman todos los siguientes valores excepto min El valor no puede ser un valor flexible (p. 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-auto-rows: minmax(1fr, 500px) 3fr;

Pero estos son perfectamente válidos:

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

auto

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

De auto las dimensiones de la pista se pueden estirar desde align-content y justify-content properties, ocuparán el espacio restante en el contenedor de red predeterminado autoeso dijo auto los tamaños de pista no pueden ganar una batalla contra fr unidades al asignar el espacio restante, se ajustan al tamaño máximo de su contenido.

Presta atención al resultado de estas dos canciones de ejemplo:

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

Cuando las tres líneas están configuradas para autotodo lo que hacen es compartir el mismo espacio. Pero cuando colocamos una unidad fraccionaria en el medio como la segunda fila, auto las filas son tan altas como su contenido y 1fr la fila ocupa el espacio restante.

min-content

los min-content la palabra clave representa pequeñísimo el posible espacio que un elemento puede ocupar en un contenedor de red 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, el min-content es el ancho del mundo "impresionante" porque es la parte más alta del contenido (más alta que "css" y "e"). Si la línea se acorta, el texto comienza a desbordar el contenedor.

En código se ve así:

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

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

... lo que lleva a algo como esto:

max-content

los max-content la palabra clave representa el tamaño más pequeño requerido para que un elemento contenga todo su contenido sin ser envuelto o desbordado. Un nombre que incluye "max" hace que parezca que estamos tratando con un tamaño máximo, por lo que este valor puede ser un dolor de cabeza.

Si revisamos nuestra min-content ejemplo anterior, una cuadrícula con un valor de tamaño de max-content crecerá hasta que su contenido quepa en una línea. Entonces, en el caso de "CSS es increíble" max-content ¿Cuánto espacio ocupan estas tres palabras juntas en una línea?

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

fit-content(<length-percentage>)

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

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

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

Ejemplos

Vamos a crear una galería con un número desconocido de elementos que se repiten automáticamente en filas y, dado que no sabemos cuántos elementos tendremos, no hay forma de saber cuántas filas se necesitarán, por lo que no hay forma de especificar explícitamente establecer el tamaño de las filas.

Aquí es donde grid-auto-rows La propiedad es útil para establecer el tamaño de estas filas generadas automáticamente en nuestra galería.

Queremos que nuestras filas tengan un patrón de 150px y 200px tamaño repetitivo:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px 200px;
  gap: 1rem;
}

En la siguiente demostración, puede agregar más elementos y ver el efecto de grid-auto-rows:

Compatibilidad con navegador

Más información

Conectado