OBSERVACIÓN: Si por algún motivo requieres la dirección de una imagen en un sitio externo para insertarla en tu código HTML. Y resulta que al obtener la URL tiene texto de más al final de ella, cómo en la imagen de ejemplo del pato Donald:
Debes recortar la URL hasta la extensión de la imagen, para que tu página web pueda cargarla correctamente. Por tanto, la dirección anterior debe ser recortada cómo a continuación:
https://static.wikia.nocookie.net/disney/images/0/04/Donald-duck25.png
¡ATENCIÓN!
La función "fit-content()" establece un ÚNICO tamaño (ancho/altura) PREFERIDO para una grid track, a través del argumento que recibe. Sin embargo, su ALGORITMO NO puede establecer un tamaño MÁS ALLÁ del tamaño INTRÍNSECO del grid item. Ahora, recordemos; el TAMAÑO INTRÍNSECO de cualquier tipo de contenedor, se define de acuerdo a su contenido, a menudo asociado a la cantidad de TEXTO en su interior. Con el fin de explicar las DOS clasificaciones del tamaño intrínseco, nos enfocaremos en el modo de ESCRITURA HORIZONTAL: I) El MENOR tamaño intrínseco (conocido con la palabra clave "min-content") de un contenedor, es el ANCHO de la PALABRA más LARGA en su texto. A no ser que, la propiedad «min-width» tenga un valor MAYOR al ANCHO de la PALABRA más LARGA. II) El MAYOR tamaño intrínseco (conocido con la palabra clave "max-content") de un contenedor, es el ANCHO resultante al desplegar TODO su texto en UNA sola línea. A continuación te comparto un EJEMPLO realizado con MI propio código fuente, para que comprendas el COMPORTAMIENTO de la función "fit-content()" en diversos ESCENARIOS. El proyecto consiste en un grid container con SEIS grid items que contienen cada uno el MISMO enunciado en su interior, pero que NO tienen el MISMO ANCHO. El tamaño para cada grid track se muestra en la siguiente lista cómo los VALORES designados a la propiedad «grid-template-columns»; junto con una descripción de su INTERPRETACIÓN por el navegador: 1. "min-content": El PRIMER (contando de izquierda a derecha) grid item, se extiende hasta su tamaño INTRÍNSECO MENOR de 77.64px. 2. "min-content" y «min-width: 90px;»: El SEGUNDO grid item, se extiende hasta alcanzar su ANCHO mínimo ajustado por la PROPIEDAD «min-width» a 90px. 3. "fit-content(50px)": El TERCER grid item, TAMBIÉN se extiende hasta su tamaño INTRÍNSECO MENOR de 77.64px. Su tamaño se establece de esta forma, por que la función "fit-content()" pretende FORZAR un ANCHO MENOR (50px) al INTRÍNSECO. 4. "fit-content(225px)": El CUARTO grid item, tiene un ANCHO IGUAL a 225px, ajustado por la propia FUNCIÓN "fit-content()". 5. "max-content": El QUINTO grid item, se extiende hasta su tamaño INTRÍNSECO MAYOR de 424.21px. 6. "fit-content(450px)": El SEXTO grid item, TAMBIÉN se extiende hasta su tamaño INTRÍNSECO MAYOR de 424.21px. Su tamaño se establece de esta forma, por que la función "fit-content()" pretende FORZAR un ANCHO MAYOR (450px) al INTRÍNSECO. Por último, si deseas abordar más a fondo el VALOR "fit-content()" para la propiedad (entre otras) «grid-template-columns», te comparto la documentación disponible en "MDN Web Docs": https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function
¡CURIOSIDAD de Flexbox!
¿Sabías que la propiedad << flex-basis >> se comporta de diferente forma con el valor "0" que con el valor "0%"? Recordemos que la propiedad longhand << flex-basis >> determina el TAMAÑO INICIAL en el main axis, para un flex item; con el fin de que el navegador realice los cálculos necesarios para establecer el crecimiento/encogimiento de los flex items, dentro de su contenedor. Para entender tal diferencia entre el valor "0" SIN unidades y con el signo de PORCENTAJE, deben cumplirse cada una de las siguientes tres CONDICIONES: 1. El flex container NO debe tener un TAMAÑO DEFINIDO. 2. Al flex item se le impone una restricción con la propiedad << min-width >> / << min-height >>; de acuerdo con la dirección del main axis. 3. El MISMO flex item debe poseer un CONTENIDO que lo obligue a crecer MÁS ALLÁ de la anterior RESTRICCIÓN. A continuación, te comparto tanto MI código fuente cómo una captura de pantalla del navegador, para que notes la DIFERENCIA entre la interpretación del MISMO valor "0", pero con diferentes UNIDADES. Ahora, con el fin de visualizar mejor el efecto, cada flex container se establece cómo un elemento inline, escribiendo la declaración: << display: inline-flex; >>. Además, se cambia la orientación del main axis a vertical, con la declaración: << flex-direction: column; >>. Para el primer (a la izquierda) flex item, la propiedad << flex-basis >> tiene el valor de "0". Por lo que el navegador muestra su CONTENIDO hasta el límite impuesto a 200px; más allá de ésta ALTURA, es necesario utilizar una barra de SCROLL vertical para visualizar el RESTO de su contenido. Por otro lado, para el segundo (a la derecha) flex item, el valor de la propiedad << flex-basis >> es "0%". Así, en este caso en PARTICULAR, el navegador interpreta a TODO el contenido dentro del flex item cómo su TAMAÑO INICIAL; el hecho anterior sucede de esta forma por que su flex container NO tiene un tamaño DEFINIDO y por lo tanto, NO hay punto de REFERENCIA para el PORCENTAJE. Lo que a su vez, puede ROMPER con la restricción impuesta al tamaño del flex item. Si deseas profundizar sobre éste inusual comportamiento de Flexbox, te comparto la información referente en "MDN Web Docs", cómo un buen punto de partida: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#flex_basis_0_vs_0
¿SABES cómo se CALCULAN las TRANSFORMACIONES CSS?
Resulta que una rama de las Matemáticas, denominada ÁLGEBRA LINEAL, propone un nuevo tipo de ente abstracto conocido cómo "MATRIZ"; en un inicio, nos permitieron resolver a nivel GOD, muchas ECUACIONES algebraicas al MISMO TIEMPO. Así, siguiendo esta misma línea de pensamiento, las matrices permiten a las computadoras lograr que un elemento gráfico en 2D o 3D, dentro del área de la pantalla, tenga la capacidad de TRASLADARSE, ROTAR y/o ESCALAR; lo mejor de todo esto, es que para una computadora, resulta en ocupar POCOS de sus recursos para realizar estas operaciones complicadas para nosotros.
¡ADVERTENCIA!
¿Sueles utilizar el valor "1" en la propiedad « flex » para TODOS los flex items, con el fin de lograr anchos/alturas UNIFORMES y flexibles? Pues bien, te sorprenderá saber que bajo ciertas CIRCUNSTANCIAS los flex items NO tienen el mismo tamaño, aunque tengan el MISMO factor de CRECIMIENTO, el mismo factor de ENCOGIMIENTO y el mismo TAMAÑO INICIAL. Te explico. Debido a que un flex item TAMBIÉN puede cambiar su tamaño (ancho/altura) de acuerdo con la CANTIDAD de texto en su interior; una palabra extremadamente larga en el texto, puede IMPONER un ancho (centrándonos en el modo de escritura horizontal) MAYOR al ancho CALCULADO por el navegador para establecer anchos iguales a TODOS los flex items. A continuación, te comparto el siguiente ejemplo con mi PROPIO código fuente, para que comprendas gráficamente el efecto en cuestión. El proyecto consta de un flex container con un ancho FIJO a 340px y con dos flex items en su interior. La problemática se centra en el segundo (a la derecha) flex item, que contiene la palabra "extremadamente"; ésta palabra es suficientemente LARGA, para OBLIGAR al flex item a IMPONER SU ancho MÍNIMO IGUAL al ancho de la palabra misma. Lo que a su vez, OBLIGA al primer (a la izquierda) flex item a ADOPTAR TODO el espacio SOBRANTE; aunque signifique que su ancho sea visiblemente MENOR que el ancho del segundo flex item. Por supuesto, existen propiedades CSS para ROMPER palabras extensas dentro de un contenedor, pero VISUALMENTE, ¡NO son una opción viable ni atractiva!
¡Muchas FELICIDADES por concluir el curso de Flexbox y Grid! Ahora, una pequeña ACTUALIZACIÓN:
¿Has oído hablar sobre el NUEVO valor "subgrid" para la propiedad << grid-template-rows >> / << grid-template-columns >>?
Es una nueva característica de CSS Grid, que permite de una forma SENCILLA la ALINEACIÓN para una cuadrícula ANIDADA (un grid item con la declaración "display: grid;") con respecto al grid container PRINCIPAL. En pocas palabras, el valor "subgrid" HEREDA al nuevo grid container el TAMAÑO y el ESPACIADO entre las grid TRACKS del grid container PRINCIPAL; permitiendo una vía para solucionar varios problemas en el diseño del layout con CSS Grid.
Si tienes más curiosidad de cómo aprovechar al 100% éste nuevo feature, totalmente soportado por los navegadores desde el año 2023, te comparto el contenido que nos proporciona "MDN Web Docs" al respecto:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid
¡RECOMENDACIÓN!
Puedes saltarte el video de esta clase y verlo tras haber concluido el curso; para que puedas comprender a detalle y SIN que tu cabeza ESTALLE en mil pedazos, todos los efectos de las propiedades de CSS Grid usadas durante el diseño del layout de la galería responsive. Así que ve a estudiar completamente el siguiente y último módulo para que regresando a éste video, lo consideres cómo el proyecto final.
¡ACTUALÍZATE! Al día de hoy NO implementes más las propiedades << grid-row-gap >>, << grid-column-gap >> y su shorthand << grid-gap >> en tus proyectos; la causa es por qué están parcialmente OBSOLETAS. En su lugar debes usar << row-gap >>, << column-gap >> y << gap >>, respectivamente; pues ahora, el cambio en ésta especificación está totalmente SOPORTADO por TODOS los navegadores, a partir del año 2021; incluso para el diseño del layout tanto con Flexbox, cómo con Multi-column.
¿Te quedó la DUDA si son 6 ó 7 grid lines horizontales?
En el diagrama de ejemplo, a partir del minuto 8:20 de la reproducción del video; la segunda línea horizontal, contando de arriba a abajo, NO fue tomada en cuenta. Así que sin más, ¡la cantidad total de grid lines HORIZONTALES es 7!
¡REFLEXIONA de MI COMENTARIO ANTERIOR! Si deseamos conocer el número de líneas requerido para crear una cantidad específica de columnas dentro de una cuadrícula. Podemos constatarlo fácilmente trazando línea vertical tras línea vertical (colocándolas por ahora de izquierda a derecha) y asumiendo que por cada línea agregada es una columna más creada; siendo ésta misma línea, el borde IZQUIERDO de la nueva columna. Por lo tanto, para posteriormente CERRAR la cuadrícula, se debe colocar una línea extra para la última columna; resaltando el hecho de que tal línea NO es compartida con ninguna otra columna.
Así concluimos en que hemos demostrado que justamente por la observación anterior que, el número de LÍNEAS SIEMPRE SUPERA por una UNIDAD al número de COLUMNAS. ¡Y sí! Sucede de forma similar la misma situación con los RENGLONES de una cuadrícula.