Maquetación de tarjetas

facebook-svg gplus-svg twitter-svg

Podemos crear una maquetación de tarjetas al estilo Pinterest utilizando el layout de columnas en CSS.
Para esto dentro de un elemento .contenedor voy a crear varias tarjetas.

<div class="contenedor">
    <div class="targeta"><p>Texto</p></div>
    <div class="targeta"><p>Más texto</p></div>
    .......
</div>

Además de un padding:1em; las tarjetas tienen un margen-bottom:1em igual al espaciado de columna column-gap. De hecho en el css no aparece el column-gap pero el valor por defecto de este es de 1em. Las tarjetas también tienen un borde border: 1px dotted #d9d9d9;
Observación: Para simplificar el CSS no voy a utilixar prefijos, aunque voy a utilizar la libreria prefixfree.js, una librería que automáticamente añade prefijos en el CSS.


.targeta {
    margin: 0 0 1em;/*Lo mismo que column-gap*/
    padding: 1em;
    border: 1px dotted #d9d9d9;
  }

El .contenedor ocupa solo el 80% de la ventana y esta centrado. Tiene un máximo de 3 columnas y la anchura mínima de cada columna es de 250px. El CSS para el .contenedor es el siguiente:


.contenedor {
    /*ocupa solo el 80% de la ventana*/
    max-width: 80%;
    /* y esta centrado*/
    margin: 0 auto;
    /*un máximo de tres columnas*/
    column-count: 3;
    /*la anchura mínima de cada columna es de 250px*/
    column-width: 250px;
  }

Además quiero que el encabezado h4 se extienda sobre todas las columnas así que voy a utilizar column-span:all;

El CSS para el encabezado h4 es el siguiente:


h4 {
    font-size: 120%;
    font-weight: bold;
    text-align: center;
    padding: 1em;
    /*el encabezado se extiende sobre todas tres columnas*/
    column-span:all;
  }

Y funciona, pero hay un problema: algunas tarjetas estan rotas al principio o final de columna. Para que esto no pase necesito añadir una regla más en el CSS:


.targeta {
    display: inline-block;
    ..............

Por favor abra este ejemplo en Codepen y cambie el tamaño de la ventana:

See the Pen CSS maquetación de columnas*** by Gabi (@enxaneta) on CodePen.

Vea una demonstración mucho más elaborada en Codepen