> Faqs > ¿Podemos hacer una maquetación Masonry solamente con CSS?

¿Podemos hacer una maquetación Masonry solamente con CSS?

Ahora que CSS ha evolucionado bastante, ¿es posible hacer una maquetación "masonry" solo con CSS?

Ya sabéis, esa distribución de bloques que se van adaptando como los ladrillos en una pared, dependiendo del tamaño de las cajas.

Existen varios plugins de Javascript para conseguirlo. Pero me gustaría hacerlo basado en estándares.

Respuestas

Hola! Que yo sepa no es posible solamente con CSS hacer ese tipo de maquetación. Hace falta algo de Javascript a día de hoy (2020).

Existen librerías clásicas para conseguir ese efecto, por ejemplo:

Sin embargo, sí que hay en camino estándares de la W3C que nos servirán para hacer layouts personalizados, que podrán dirigirse por medio de Javascript. Puedes consultar el borrador del estándar W3C CSS Layout API Level 1. Es una especificación que permitirá a los desarrolladores crear sus propios sistemas de maquetación, especificando el código mediante Javascript y luego usando el sistema desde CSS. En la práctica nos permitirá crear nuevos modelos de maquetación, similares a los que que hoy existen como flexbox o css grid layout. Estos nuevos sistemas personalizados, cuyo código residirá en Worklets Javascript, permitirán extender el CSS con nuevas utilidades totalmente personalizadas, igual que los Web Components permiten extender el HTML actualmente. Habrá que esperar para poder utilizarlo todavía.

Miguel Angel
3295 146 215 17

Buenos días, si que es posible lo puedes lograr haciendo uso de flexbox o css grid sin problemas! saludos

Martin
5 1
Y tienes alguna sugerencia?