Nota: Acabo de traducir el texto a continuación y lo publiqué aquí. Las referencias se encuentran al final de este artículo.

Hola. Hoy quiero hablar sobre algunas palabras clave especiales de CSS Grid que son útiles para definir el tamaño de las pistas de la grilla. La capacidad de utilizar estas palabras clave le permitirá determinar con precisión los tamaños de pista de cuadrícula deseados. Entonces vamos alla.

Este artículo es parte de mi introducción a la serie CSS Grid. Si quieres ver mis publicaciones anteriores, aquí puedes encontrar el índice completo.

Introducción de palabras clave de tamaño

Cuando se trata de CSS Grid, solo hay tres palabras clave que puedes usar para determinar el tamaño de las pistas. Estas palabras clave son automático, contenido mínimo y contenido máximo. Todos ellos se pueden utilizar en las propiedades CSS grid-template-colums y grid-template-rows.

Contenido mínimo y contenido máximo

Si desea que el tamaño de la pista de la cuadrícula dependa de su contenido, debe usar una de dos palabras clave: contenido mínimo o contenido máximo. Pista de cuadrícula de contenido mínimo intentará mantener el tamaño mínimo sin desbordar su contenido. Pista de cuadrícula de contenido máximo, sin embargo, asume que el espacio libre para expandirse es infinito y asume el ancho ideal para su contenido.

Permíteme mostrarte algunos ejemplos que muestran la diferencia entre las palabras clave mencionadas. Tenga en cuenta que cada imagen contiene dos contenedores: el contenedor con una columna de cuadrícula de contenido mínimo a la izquierda y el contenedor con una columna de cuadrícula de contenido máximo a la derecha.

Como puede ver aquí, no hay diferencia de tamaño entre las columnas de contenido mínimo y de contenido máximo. La razón es que la imagen tiene su "tamaño fijo predeterminado" que no cambiará a menos que usted le indique explícitamente que cambie. El contenido de un texto, por otro lado, tiene la capacidad de "comprimir" su tamaño dependiendo de la situación. Esta compresión se realiza mediante ajuste de texto (ajuste de texto), es decir, las palabras individuales no se ajustan. Sabiendo esto, reemplacemos la imagen del ejemplo anterior con algo de texto.

Esta vez, los anchos de las columnas son diferentes. La columna min-content obliga a su contenido de texto a "ajustarse" mientras que la columna max-content se expande tanto que no es necesario ajustar el texto. Tenga en cuenta que la columna contenido mínimo tiene el mismo ancho que la palabra más larga y la columna contenido máximo ahora es más ancha que el contenedor mismo.

¿Qué pasará cuando una columna contenga más de un tipo de contenido? A continuación se muestra un ejemplo de columnas que contienen imágenes y texto.

En ambos casos, el elemento más ancho determina el tamaño de la columna. En el caso de min-content, este elemento es la imagen o la palabra más larga. En el caso de la columna ancho máximo, se trata de una imagen o del texto completo. Observe cómo ambos tipos de contenido están separados verticalmente dentro de la columna. Quiero analizar este comportamiento en uno de mis artículos futuros.

Palabra clave automática

La palabra clave auto está relacionada con la unidad fr que describí en los dos artículos anteriores. De manera similar, determina que la pista de la cuadrícula debe "llenar" todo el espacio disponible en un eje determinado.

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

Sin embargo, existen dos diferencias principales entre la palabra clave auto y la unidad fr. Primero, la palabra clave auto no es una unidad, por lo que no puede usarla con un valor numérico (por ejemplo, 2auto) como puede hacerlo con fr. En segundo lugar, la palabra clave auto siempre "pierde" con la unidad fr, cuando ambas se usan juntas. Vea el ejemplo a continuación.

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

Puede esperar que la columna automática "llene" una cantidad igual de espacio que la columna fr en la dimensión horizontal. Sin embargo, la presencia de la columna fr hace que la columna "reduzca" automáticamente su tamaño al tamaño del contenido presente.

Tenga en cuenta que en el caso de contenido de texto, seguimiento de cuadrícula automática se comporta de manera diferente que seguimiento de cuadrícula de contenido mínimo/máximo. Cuando auto se mezcla con fr, auto-track nunca fuerza que el contenido del texto se "ajuste" a menos que el auto-track "llene" todo el espacio disponible.

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

Gracias por leer este breve artículo. Si desea leer más contenido como este, siga mi cuenta dev.to o Twitter. Además, no dudes en darme cualquier tipo de comentario. Me encantaría leer tus comentarios. ¡Hasta pronto en mi próximo artículo!

PD. Si quieres apoyar mi trabajo, te agradecería una taza de café. Gracias. ❤️

Fuente

Artículo escrito por Mateusz Kirmuć.