bookmark_borderbookmark
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Para este séptimo ejemplo, combina algunos de los conceptos que ya aprendiste a fin de crear un diseño adaptable con elementos secundarios flexibles y ubicados de forma automática. Bastante bien. Los términos clave que debes recordar aquí son repeat, auto-(fit|fill) y minmax(), que recuerdas por la sigla RAM.
Estás usando repeat() de nuevo, pero esta vez estás usando la palabra clave auto-fit en lugar de un valor numérico explícito. Esto habilita la ubicación automática de estos elementos secundarios. Estos elementos secundarios tienen un valor mínimo base de 150px con un valor máximo de 1fr, lo que significa que en pantallas más pequeñas ocuparán el ancho completo de 1fr y, a medida que alcancen un ancho de 150px, comenzarán a fluir sobre la misma línea.
Con auto-fit, las pistas completamente vacías se contraerán y se convertirán en 0, y las pistas llenas aumentarán y ocuparán espacio. Sin embargo, si cambias esta opción a auto-fill, las pistas vacías ocuparán la misma cantidad de espacio que si se completaran:
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2023-10-25 (UTC)"],[],[]]