Primeros pasos hacia un posible diseño de mampostería CSS

 

 

 


Índice
  1. ¿Es esto realmente una cuadrícula?
  2. ¿Houdini?

No está al nivel de demanda como, por ejemplo, las consultas de contenedores, pero poder crear diseños “de mampostería” en CSS ha sido una gran demanda para los desarrolladores de CSS durante mucho tiempo. La mampostería es ese tipo de diseño donde los elementos de tamaño desigual se colocan en filas irregulares. Algo así como una típica pared de ladrillos volteada de lado.

 

El diseño por sí solo ya se puede lograr solo en CSS, pero con una gran advertencia: los elementos no están organizados en filas, sino en columnas, lo que a menudo es un factor decisivo para la gente.

/* People usually don't want this */1 4 6 82 73 5 9
/* They want this *.1 2 3 45 6 78 9

Si quieres esa cosa de filas irregulares y el orden de fuente horizontal, estás en territorio de JavaScript. Hasta ahora, es decir, ya que Firefox implementó esto bajo una bandera de función en Firefox Nightly, como parte de la cuadrícula CSS.

Mats Palmgren :

Una implementación de esta propuesta ya está disponible en Firefox Nightly. Está deshabilitado de forma predeterminada, por lo que debe cargar about:configy configurar la preferencia layout.css.grid-template-masonry-value.enabledpara truehabilitarlo (escriba “mampostería” en el cuadro de búsqueda de esa página y le mostrará esa preferencia).

Jen Simmons ya ha creado algunas demostraciones:

¿Es esto realmente una cuadrícula?

Un poco de rechazo por parte de Rachel Andrew…

Grid no es mampostería, porque es una cuadrícula con filas y columnas estrictas. Si echas otro vistazo al diseño creado por Masonry, no tenemos filas y columnas estrictas. Normalmente tenemos filas definidas, pero las columnas actúan más como un diseño flexible o Multicol. La diferencia clave entre el diseño que obtiene con Multicol y un diseño de mampostería es que en Multicol los elementos se muestran por columna. Normalmente, en un diseño de mampostería, desea que se muestren en filas.

[…]

Hablando personalmente, no soy un gran admirador de que esto sea parte de la especificación Grid. Ciertamente es convincente a primera vista, sin embargo, siento que este es un modo de diseño relativamente especializado y en realidad no es una cuadrícula en absoluto. Es más parecido al diseño flexible que al diseño de cuadrícula. Todo sobre videojuegos

Al colocar este método de diseño en la específica Grid, me preocupa que luego nos veamos obligados a admitir la funcionalidad Masonry con cualquier otra adición a Grid.

Nada de esto es definitivo todavía y hay una discusión activa al respecto en el Grupo de Trabajo de CSS.

Como dijo Jen:

Esta es una implementación experimental que se está discutiendo como una posible especificación CSS. Aún NO es oficial y probablemente cambiará. No escriba publicaciones de blog diciendo que esto definitivamente existe. No es una cosa. Aún no. Es un experimento. Un prototipo. Si tiene alguna idea, participe en el CSSWG.

¿Houdini?

La última vez que habló de mampostería nativa, se mezcló con la idea de que CSS Layout API, como parte de Houdini, podría hacer esto. Eso es una cosa, como puede ver al abrir esta demostración (repositorio) en Chrome Canary.

No estoy totalmente al tanto de si Houdini está destinado a ser una cosa para que ideas como esta puedan crear prototipos en el navegador y finalmente sacarse de Houdini, o si las ideas simplemente deben permanecer en Houdini, o qué.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. El diseño web responsivo cumple diez años.
  2. Comparación de navegadores para diseño responsivo
  3. Diseño inclusivo 24
  4. diseño de formulario

Primeros pasos hacia un posible diseño de mampostería CSS

Primeros pasos hacia un posible diseño de mampostería CSS

Índice ¿Es esto realmente una cuadrícula? ¿

programar

es

https://pseint.es/static/images/programar-primeros-pasos-hacia-un-posible-diseno-de-mamposteria-css-1500-0.jpg

2024-06-13

 

Primeros pasos hacia un posible diseño de mampostería CSS
Primeros pasos hacia un posible diseño de mampostería CSS

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences