🖖 Inicio

SERVICIOS

Salir

nochedía

Implementar un grid masonry con React

200 palabras
1 minutos
May 18, 2020
cursosgatsbycssmasonry

La Técnica Masonry

Por masonry se entiende una técnica similar a utilizar el css-grid o el css-flex de toda la vida, pero distinto

Distinto en el sentido de la alineación

  • Un grid està alineado

  • Un masonry no

Primero lo primero, masonry viene a referirse a "trabajar con ladrillos" que en web se traduce a representar nuestro contenido en un grid donde los elementos no están perfectamente posicionados sino que se ajustan a su contenido

Posicionarlos "como si fueran ladrillos"

Esto que parece tan sencillo, no lo es si quiere implementarlo con pure css

Y claro, si no se puede implementar sólo con css, entonces no es sencillo

Y es por eso que tienes a tu disposición tantas y tantas librerías que lo hacen por ti, y es que si fuera fácil no habría ni las librerías ni la cantidad de artículos que encuentras paseando por google

Más que nada porque puedes hacerlo de distintas maneras

Bien

Pues de esto va éste curso, de entender y conseguir una representación masonry que, ya que estamos, que menos que adaptarla al mundo react

Si quieres ver el resultado, he implementado esta técnica en el gatsby-theme AFFILIATE que tienes aquí

Se trata de un theme de gatsby (y de su starter) con el que utilizo el masonry para mostrar ítems que bien podrían ser una lista de enlaces afiliados (de ahí el nombre)

Empezar
  1. Distribución masonry
    • Pure css
      • JavaScript con css-flex
        • En hook
          • Qué es lo que no me gusta de esta solución?
            • JavaScript con css-grid
              • En hook
                • Otras opciones?

                  Newsletter de kuworking, un correo de tanto en cuanto

                  Quizá te interese

                  Privacidad
                  by kuworking.com
                  [ 2020 >> kuworking ]