Diseño de cuadrícula CSS: diseño de mampostería hecho a partir de HTML puro y CSS

El usuario de Codepen, Kseso, nos convence con un caso de aplicación simple pero impresionante para CSS Grid, al crear un diseño de Masonry limpio a partir de HTML y CSS puro.

El diseño de cuadrícula CSS está disponible en todos los ámbitos

El hecho de que CSS Grid Layout sea una función de diseño importante para los sitios web modernos ha sido un hecho desde su disponibilidad casi completa en todos los navegadores modernos. Como una adición perfecta a Flexbox, CSS Grid brinda la opción de diseñar páginas enteras, mientras que Flexbox está restringido a áreas de elementos individuales dentro de la página.

Por ahora, CSS Grid Layout es compatible de forma nativa. Opera Mini es una excepción. En Internet Explorer, se requiere el prefijo ms. Lo mismo se aplica a Microsoft Edge en su versión actual 15. Tanto IE como Edge no son totalmente compatibles con CSS Grid, incluso con el prefijo. Esta falla se solucionará a partir de la versión 16 del navegador Redmond actual. Si puede permitirse el lujo de desarrollar proyectos solo para los navegadores actuales, puede hacer todo lo posible aquí.

Kseso es un cruzador de fronteras muy activo al que le gusta experimentar en el área de vanguardia. Le gusta agregar el hashtag #impoCSSible, documentando que no presenta una solución predeterminada establecida.

Diseño de mampostería simple pero universal con cuadrícula CSS

El diseño de mampostería que Kseso presenta en este Codepen está destinado a ser una inspiración, pero también se puede usar tal como está. Faltan los prefijos necesarios. Sin embargo, puede agregarlos usted mismo fácilmente; el código no es tan largo.

Kseso tampoco puso mucho esfuerzo en optimizar la solución, pero debería ser suficiente para muchos casos de aplicación. Aparte de la versión de HTML y CSS puro, Kseso ofrece otra versión, donde integró un JavaScript para carga diferida, que es la carga de imágenes basada en la necesidad. Para galerías de imágenes grandes, esta solución debería ser más práctica.

Kseso tiene mucho más que ofrecer

Vale la pena seguir a Kseso en Gorjeo. El tambien corre un blog, pero solo está disponible en español. El Traductor de Google puede ayudar un poco con eso, pero no maneja muy bien la forma de enunciar de Kseso. El diseño del blog es interesante. Toma mucha inspiración de Tweetdeck y HootSuite, y resultará familiar para los fanáticos de las redes sociales de inmediato.

Kseso ya había estado publicando en el diseño CSS Grid en 2015. En ese entonces estaba muy adelantado a su tiempo. Renunciaré a la integración del código fuente aquí, ya que puede obtener fácilmente todo del Codepen y, potencialmente, incluso experimentar con los parámetros. Vamos.

Por cierto: En este artículo se incluye un video, Jen Simmons le muestra de lo que es capaz el nuevo inspector CSS Grid de la compilación Firefox Nightly. Definitivamente puedes usarlo en este contexto.