La trampa del layout: relaciones de aspecto y CSS Grid

Los marketplaces de plantillas listan masonry, bento y justified como bullets de estilo equivalentes. No lo son. Masonry y justified conservan ratios nativos, pero empaquetan distinto, y el bento suele vivir en una página diseñada, no como piel de galería drop-in para un portafolio entero.

Los foros se llenan de peleas de CSS a medida contra el recorte de una plataforma. Esa energía suele apuntar a la capa equivocada. Empieza por nombrar qué familia de layout quieres y luego pregunta si el motor puede respetar ratios nativos o debe inventar un recorte.

Por debajo aparecen dos enfoques comunes. CSS Grid con un aspect-ratio explícito (y a veces grid-auto-flow: dense) fija los mosaicos en una geometría compartida: el navegador conoce la caja antes de que pinte la imagen, por eso las grids cropped se sienten estables y los recortes «incorrectos» se sienten intencionales más que accidentales.

Los layouts justified basados en flex hacen el trabajo opuesto: miden ratios intrínsecos de imagen y resuelven una altura de fila compartida para llenar el ancho del contenedor sin grandes huecos. Masonry deja libres las alturas de columna. Por eso un set de street puede conservar sus frames, y por eso una demo de escritorio de cuatro columnas a menudo colapsa en una sola columna incómoda en el teléfono si nunca se diseñaron los breakpoints.

No necesitas enviar el CSS tú mismo. Sí necesitas una plataforma cuyo motor de portafolio sea explícito sobre qué modelo ejecuta, en lugar de un tema que recorta en escritorio y reflowea de forma impredecible en móvil.

Un masonry de cuatro columnas que se ve editorial en un portátil de marketing a menudo se convierte en una pila vertical larga en el teléfono. Puede estar bien si gutters, densidad de captions y targets táctiles se diseñaron para esa pila. La mayoría de demos de plantilla ocultan el fallo al no mostrar nunca el teléfono.

Las grids cropped suelen sobrevivir mejor al encogimiento para escanear, pero la ventana de recorte cambia: un recorte de cara seguro en escritorio puede perder ojos o bordes de producto cuando el mismo ratio vive en una columna más estrecha. Previsualiza la familia de layout a ancho de teléfono antes de comprometer una serie pública a ella.

Los layouts inmersivos (split stage, book, carousel) y los modelos cronológicos (timeline, journal) reflowean de otra forma otra vez (escenario sobre rail, vídeo vertical con tope de altura en journal), así que «apilar la cuadrícula» no es la única historia móvil.

El motivo detrás de la recomendación importa más que la etiqueta. Los empaquetados que conservan ratio favorecen el trabajo donde el frame es el punto. Los recortes uniformes favorecen el trabajo donde importan la comparación y la velocidad. El bento de página y los héroes a sangre favorecen el trabajo donde unas pocas imágenes deben liderar.

Los layouts de portafolio de ArtInStack son familias de presentación que eliges a propósito: square grid, masonry y justified en páginas públicas de portafolio, más modelos de navegación inmersivos y cronológicos cuando el set necesita otro orden de lectura. El bento del Page Editor es para jerarquía diseñada en una página del sitio, no una tercera piel de galería para el mismo trabajo.

Una salvedad práctica: justified en una página pública `/portfolio` no es lo mismo que cada embed de página. Los embeds de Image Portfolio hoy mapean justified a una cuadrícula uniforme, así que previsualiza la superficie que de verdad publicarás.

Combínalo con decisiones de entrega: cuán nítido y pesado es cada mosaico pertenece a Resolución frente a rendimiento para imágenes de portafolio. Si el motion lidera la página, ver Presentación de portafolio con vídeo primero.