12 cards HTML creadas con Grid

En esta página tienes 12 propuestas o ejemplos de cards para creadas utilizando unicamente el layout Grid de CSS. Por supuesto todas tienen una solución: puedes verla en el código fuente de la página o usnado el inspector del navegador.

En algunos casos se ha resuelto la disposición con un solo grid y en otros se usan grids dentro de grids para mostrar estas opciones. Pero solo se usa la estructura grid, la disposición bidimensional de elementos proporcionada por CSS.

Al clickar sobre la imagen se abrirá otra pestaña del navegador con la tarjeta, si quieres el código fuente la forma más sencilla es usar el inspector de código del navegador (CTRL-U o F12 habitualmente), que además te permite modificar y experimentar con los ejemplos.

Todas son cards estáticas, es decir, sin efectos de animaciones, salvo algún hover para enlaces. Con estos ejercicios terminarás dominando el uso del Grid.

Por supuesto si te sirven puedes usarla en tus diseños y si tienes peticiones, sugerencias o dudas utiliza el formulario de contacto