12 cards HTML creadas con Grid

En esta página tienes 12 propuestas de cards para crearlas utilizando unicamente el layout Grid de CSS. Por supuesto todas tienen una solución.

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 efecto hover para los enlaces. Con estos ejercicios termianrá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