Hemos hablado mucho sobre el diseño de mampostería aquí en CSS-Tricks, por lo que no es necesario recordarle la discusión bilateral sobre el diseño de mampostería. cómo lidiar con esola idea de usarlo Como un nuevo concepto de diseño unificadoo Formas alternativas de hacerlo funcionar hoy.
Esto es lo que necesita saber: será display: grid-lanes.
Las primeras discusiones sobre albañilería comenzaron en 2017, cuando Rachel Andrew expresa algunas preocupaciones sobre cómo crear un diseño de mampostería en Pinterest. Rachel dijo que sentía que el enfoque correcto sería algo como Flexbox, pero eso no era del todo posible con Flexbox porque el proyecto preferiría fluir de arriba a abajo en lugar de a través de cada fila:
Actualmente, el enfoque CSS más cercano a dicho diseño es utilizar
multi-colSin embargo, estos elementos fluyen de arriba a abajo en lugar de a través de filas.Esto se parece más al comportamiento de una caja flexible que a una cuadrícula, ya que la solución se basa en gran medida en el tamaño del elemento. Este archivo se abre para registrar solicitudes de funciones/casos de uso para futuras discusiones.
Por lo tanto, la discusión sobre el diseño de mampostería en CSS comenzó dentro del W3C. En el mismo hilo de GitHub leerás tabb atkins bitner Compartió una forma “hacky” de usar CSS Grid.
Si conoce la altura de su proyecto de antemano, puede utilizar una rejilla para su mampostería. Esto es un poco complicado, pero configuras el contenedor de cuadrícula en
grid: auto-flow dense 1px / <column widths here>;y luego configure cada elemento en grid-row: span<pixel height as integer>;(Por ejemplo, si el elemento tiene 50 píxeles de alto, utilicegrid-row: span 50;).
Soy un gran admirador de los ingeniosos trucos de CSS, pero ¿sabes qué más me gusta? Una solución CSS funcional que facilita su uso a los principiantes. No, lamentablemente no podemos utilizar grid-template-rows o grid-template-columnscomo Nate Green sugiere En el mismo hilo:
.figure-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: flow;
}No existe una forma “fácil” de adaptar una cuadrícula a mampostería; cualquier cosa implicará una edición significativa del algoritmo de diseño. En particular, Packery necesita tener un ancho definido.
Está bien, no importa. Estoy seguro de que también estás pensando: “¿Por qué no crear una nueva display ¿Propiedad? “Brillantemente, Raquel añadió Eso:
El problema es que no podemos crear valores de visualización completamente nuevos para cada patrón de diseño único.
Tenga en cuenta que toda esta discusión tuvo lugar en 2017, lo que significa que la albañilería ha sido un objetivo difícil de alcanzar durante bastante tiempo.
Sólo para asegurarnos de que está de acuerdo conmigo, aquí hay una imagen de ejemplo de diseño de mampostería (gracias Michael Richings por esto):
Una cosa que me gustaría es que se discuta una solución/truco antes de que se anuncie el tipo de pantalla de mampostería. Como este de Andy Barefootpero realmente no he decidido convertirla en la principal característica preferida de la mampostería CSS. Oye, incluso hay un súper genial. biblioteca de albañilería de David De Sandroél dio Consejos muy útiles para el W3C y proveedores de navegadores al escribir especificaciones e implementar diseños de mampostería, como cómo funciona la carga de imágenes, múltiples columnas que abarcan elementos, rellenar espacios y preservar el orden horizontal.
Controlar Documentación de Masonry.js Más información sobre opciones de objetos.
Este hilo fue útil, Pero todavía no hay una declaración concluyente. Acerca de cómo se ve la sintaxis de mampostería. De hecho, tenemos sugerencias de código como Dan Toney:
.flex-container {
display: flex;
flex-direction: column;
flex-block-count: 2;
flex-block-flow: cross;
}Esto introduce dos nuevas propiedades de Flexbox llamadas flex-block-count y flex-block-flow Esto nos permite controlar proyectos de manera similar (usando column-count) y controlar el flujo de artículos respectivamente. Sin embargo, esto no será como Michael Richings señala:
Esto todavía no funciona para niños de diferentes alturas…
La publicación no llegó a ninguna parte, por lo que las conversaciones con el usuario de GitHub finalizaron en abril de 2020. Nic787 cita y está de acuerdo con el contenido anterior. posible solución para uso en mampostería float en lugar de una cuadrícula.
Creo que tienes un buen punto. Actualmente, float está obsoleto y flexbox permite hacer mucho, pero ambos carecen de este diseño de mampostería.
…a veces es posible que tengas muchas imágenes pequeñas seguidas, por lo que de izquierda a derecha no siempre funciona. La mampostería va de izquierda a derecha como siempre, pero de una manera que facilita a los usuarios el acceso a la información.
Afortunadamente, se siguen discutiendo muchos temas, El W3C está inundado de solicitudes de propiedades de visualización de mampostería. Otro tema de GitHub digno de mención sobre el debate sobre la masonería es Debate sobre gramática de albañilería Noviembre de 2024, pero eso no tendrá mucho impacto. En ese tiempo. De hecho, Jane Simmons señaló en la reunión Eso:
Personalmente, estoy decepcionado de que no hayamos logrado más avances. Llevamos cinco años discutiendo sobre esto.
Pasamos cinco años yendo y viniendo sobre exactamente cuál sería el nombre y la estructura. ¿Utilizamos una rejilla? ¿Utilizamos propiedades nuevas? ¿Creamos propiedades separadas solo para mampostería? Realmente no podemos decidir eso.
Una cosa que me encanta apoyar son nuestras propias reseñas. juan diegoexplica cómo La solución no es “simplemente usar grid” o crear nuevas propiedadespero podemos deshacernos de grid- Prepárelo por completo y elija una opción que satisfaga ambos grid y masonry:
… debería ser posible usar el nuevo sin prefijo
template-areasPropiedades de mampostería y cuadrícula, independientemente del contexto de formato.
Por suerte, de este hilo surgieron cosas buenas, porque otra reunion Tendrá lugar el 31 de enero de 2025, ¿adivinen qué? La solución es reutilizar las propiedades de ubicación de la plantilla de cuadrícula y el diseño de mampostería.
El grupo de trabajo CSS acaba de discutir
(css-grid-3)(masonry) Masonry Syntax Debatey estoy de acuerdo con lo siguiente: Resuelto: reutilizar propiedades de ubicación para plantillas de cuadrícula y diseños de mampostería.
esperar. ¿Por qué declaro propiedades de sintaxis de mampostería? ¿Qué pasa con la sintaxis principal en sí? ¿No es por eso que estamos aquí? Genial, todavía estás conmigo. Entonces, déjame mostrarte la pista exacta de que las guerras gramaticales de la masonería han terminado.
¡Está (casi) aquí!
Esto nos lleva a Último anuncio esa configuración grid-lanes En display La propiedad activa el diseño de mampostería.
.masonry {
display: grid-lanes;
}Llegar hasta aquí es difícil. Simplemente decidir los costos de las palabras clave Año. solo mira todos los nombres se cree que causa grid-lanes:
collapsed-gridogrid collapsegrid-stackostacked-gridgrid-packopacked-gridogrid packcompact-gridocompact gridgrid-masonryomasonry-gridgrid-flexoflex-gridgrid single-axis(Rejilla de mampostería) vs.grid dual-axis(cuadrícula normal)grid stack(Rejilla de mampostería) vs.grid grid(cuadrícula normal)staggered-gridogrid staggereduneven-gridsemi-gridlane-gridogrid-lanesaxial-grid
no me importará staggered-grid Porque eso es lo que es React Native. De hecho, Kevin Powell aceptar. Dicho esto, estoy totalmente de acuerdo. grid-lanes. Los navegadores tardarán algún tiempo en implementarlo debido a la El ajuste de abreviatura de mampostería aún está en progreso.aún no ha dicho mucho sobre este tema.
¿Qué pasa con el flujo de artículos?
Oh sí, Atención – Recuerde? es todavía en progresoespero que lo veamos en su momento grid-lanes El trabajo de implementación comenzó en serio. Fantasai tiene un gran ejemplo hipotético Explique cómo se vería si se agregara a la especificación hoy:
item-flow: <item-direction> || <item-wrap> || <item-pack> || <item-slack>
/* shorthand for */
item-direction: row | column | row-reverse | column-reverse
item-wrap: wrap | wrap-reverse
item-pack: normal | dense || collapse
item-slack: <length-percentage>En uso, tiene un aspecto similar a:
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
item-flow: collapse; /* == item-flow: row collapse 1em; */
gap: 1rem;
}Entonces, ¿qué sigue?
Después de muchos idas y venidas, albañilería grid-lanes ¡Aquí lo tienes! ¿Pero dónde exactamente?
Bueno, aquí está la parte incómoda. La verdad es que todavía tenemos que esperar a que los navegadores implementen grid-lanes. ¿Cuánto tiempo podría tomar? Realmente no puedo decirlo, pero considerando que todos los principales navegadores ya implementan algún tipo de diseño de mampostería detrás de un logotipo o vista previa, pero Utilice una sintaxis diferente:
Entonces, ¡buenas noticias para todos! Todo lo que queda es esperar. si quieres rastrear grid-lanes Progreso, aquí hay uno bueno. Grupo de enlaces por navegador De Patrick Brossett. Y si no puedes esperar a la implementación oficial de Masonry, Zell Liew tiene un método Se puede utilizar ahora con un mínimo de JavaScript.
