🖖 Inicio

QUÉ ES KUWORKING?

Salir

Curso para implementar un grid masonry con React

200 palabras
1 minutos
February 10, 2020
cursosgatsbycssmasonry
Últimos artículos del BLOG

- Biblioteca de recursos para desarrollo web

- Haz tu DAFO online y visualiza tus posibilidades

- Cinco estrategias de copywriting en función de tu público objetivo

- Siete pasos para promocionar una entrada de Instagram

- Nueve estrategias para copy que te ayudarán a estructurar tu contenido

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

Me explico

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)

Pues ya podemos empezar

Vamos allá

En kuworking estructuro los cursos para enseñarte lo necesario para poder hacer, y en paralelo aprender, no al revés

Empezar

1. Introducción

1.1 Distribución masonry

1.2 Pure css

2. Diseño Flex

2.1 JavaScript con css-flex

2.2 En hook

2.3 Qué es lo que no me gusta de esta solución?

3. Diseño Grid

3.1 JavaScript con css-grid

3.2 En hook

4. Otros

4.1 Otras opciones?

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Google Search Console

Curso para programar una alternativa a NProgress con Gatsby

WebSite de wallpapers con Gatsby

JavaScript Aplicado con una extensión de Chrome y Unsplash

Curso de PHP básico

Privacidad
by kuworking.com
[ 2020 >> kuworking ]