Maquetación de tarjetas
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