Resolviendo problemas con CSS Grid y Flexbox: Diseño de interfaz mediante tarjetas

() translation by (you can also view the original English article)

El diseño de interfaz mediante tarjetas han sido un gran éxito en el último tiempo, pero la manera de construirlas es todavía limitada por el CSS disponible para nosotros aún. Esto sucede hasta hoy en día. Al combinar CSS Grid y Flexbox, podemos hacer tarjetas que se alineen perfectamente, sean responsive, y que se adapten al contenido que está dentro de ellas. ¡Veamos como!

Lo que vamos a construir

Vamos a crear este diseño de interfaz mediante tarjetas (revisa la versión completa para una idea más clara)

En varios puntos de quiebre, conocidos como breakpoints o media queries, la disposición de las tarjetas cambiará de la siguiente manera:

Breakpoints of CSS Grid layout — 1: pequeño, 2: medio 3: vista grande

CSS Grid vs. Flexbox

Cuando Flexbox entró en escena, mi llanto de alegría escuchó en todo el mundo; Finalmente teníamos un módulo para resolver todas nuestras frustraciones de diagramación. Pero este no fue el caso actual. Flexbox trabaja mejor distribuyendo elementos a lo largo de un eje; ya sea horizontal a lo largo de una fila, o vertical como un columna. Construir una verdadera grilla adaptable con Flexbox es difícil.

La rejilla, sin embargo, está destinada a colocar los elementos a través de dos ejes (o dimensiones); horizontal y verticalmente. En este tutorial vamos a utilizar cada uno de ellos para el propósito con el que fue diseñado, lo que nos da una solución muy sólida. ¡Vamos a empezar!

Inspiración

bbc.co.uk ha estrenado recientemente (en fase beta) su última iteración. Se ve limpio y espacioso con ese diseño a base de tarjetas. Ignorando los miserables titulares, ésto luce muy bien.

Las primeras cartas están construidas y alineadas a lo largo de la fila con Flexbox, pero vamos a ampliar el diseño utilizando Grid.

Nota: para continuar necesitarás un navegador que soporte Grid. Aquí tienes alguna información para que te inicies.

La Estructura de Nuestra Tarjeta

Comencemos con un contenedor para nuestra retícula <div class="band">, algunos elementos de la retícula para organizarlo todo <div class="item"> y algunos anchors (cada uno será una tarjeta):

  <div class="band">
  
    <!-- grid item, containing a card -->
    <div class="item-1">
          <a href="" class="card">
            <div class="thumb"></div>
            <article>
              <h1>Post title</h1>
              <span>Author</span>
            </article>
          </a>
    </div>
    
    <!-- grid item, containing a card -->
    <div class="item-2">
    ...
    </div>
    
    <!-- grid item, containing a card -->
    <div class="item-3">
    ...
    </div>
    
  </div>

Coloca tantas tarjetas como quieras; nosotros estamos utilizando siete. Cada una tiene una imagen en miniatura <div class="thumb"> a la que más tarde aplicaremos una imagen de fondo. Después tenemos un <article>, que a su vez alberga un <h1>, un <span> para el autor y tal vez incluso un <p> para colocar más información.

Conceptos Básicos de la Retícula

Ahora vamos a poner en marcha algunos estilos que arreglen cada uno de estos elementos en forma de retícula.

Nota: Si esta es tu primera incursión con "Grid" puede que desees ponerte al día leyendo los tutoriales iniciales Comprender la Maquetación con CSS Grid.

Vamos a empezar aquí con la versión para móvil, así que los primeros estilos darán a nuestro contenedor una anchura y lo centrarán, luego establecemos algunas reglas Grid:

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  
  display: grid;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

Lo más importante es que aquí le estamos asignando a nuestro elemento .band con display:grid;. Luego declaramos grid-template-columns de 1fr, lo que indica que cada columna tendrá una sola fracción de las disponibles. Sólo hemos declarado una por ahora, para que cada columna llene todo el ancho.

Después declaramos grid-template-rows: auto;. Este es realmente el valor predeterminado, así que podríamos haberlo omitido, y significa que la altura de las columnas estará determinada únicamente por el contenido.

Por último definimos un grid-gap de 20px, lo cual nos da un espacio extra o medianil entre los respectivos márgenes de las columnas y las filas.

Media Query Numero Uno

En las ventanas o pantallas más amplias (el valor de 500px es completamente arbitrario), cambiaremos grid-template-columns para que nos proporcione dos tarjetas por fila. Ahora tenemos dos columnas, cada una de las cuales tiene una anchura igual a una de las dos fracciones que tenemos disponibles en total.

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }  
}

Media Query Numero Dos

Por último, para las pantallas más grandes pasaremos a un diseño de cuatro columnas.

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Aquí podríamos igualmente haber escrito repeate (4, 1fr) en lugar de 1fr 1fr 1fr 1fr. Para conocer más sobre cómo funciona la unidad fr, consulta Maquetación con CSS Grid: Columnas Fluidas y Mejores Medianiles.

Así que, ¿qué es lo que nos ha proporcionado?

Aplicar Estilo a las Tarjetas

Nos ha dado un diseño con una retícula bastante sólida, y si eres un fan del brutalismo querrás mantener las cosas tal y como están, pero para el resto, vamos a hacer que nuestras tarjetas se parezcan un poco más a las típicas tarjetas.

Empezaremos con esto:

.card {
  background: white;
  text-decoration: none;
  color: #444;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

Esto nos da algunos estilos básicos: un fondo blanco, sin subrayado para el texto, un color gris y un sencillo box-shadow para lograr cierta profundidad.

A continuación declaramos que la tarjeta debe ser display: flex;. Esto es importante – vamos a alinear los contenidos de la tarjeta verticalmente, empleando para ello Flexbox. Por lo tanto, también vamos a declarar flex-direction: column; para que nos proporcione nuestro eje vertical. Por último declaramos min-height: 100%; a fin de que todas las cartas llenen la altura del padre (nuestro elemento grid). ¡Buen trabajo! Obtenemos esto:

Estado Hover

Vamos a hacer un par más de mejoras antes de zambullirnos aún más en Flexbox. Añade un position: relative; y transition de manera que podamos mover la tarjeta cuando situemos el puntero sobre ella:

1	position: relative;
2	top: 0;
3	transition: all .1s ease-in;

Después, en el estado hover, desplazaremos la tarjeta un poco hacia arriba y haremos la sombra más pronunciada:

1	.card:hover {
2	top: -2px;
3	box-shadow: 0 4px 5px rgba(0,0,0,0.2);
4	}

Tipografía

Ahora vamos a añadir algunos estilos generales a la tipografía para alterar los colores y el espacio.

.card article {
  padding: 20px;
}

/* typography */
.card h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card p { 
  line-height: 1.4;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

Esto es lo que deberías tener:

Miniaturas

Cada miniatura se aplicará como imagen de fondo, así que vamos a añadir algo de código en los paneles, como este:

1	<div class="thumb" style="background-image: url(thumb.jpg);"></div>

Ahora nos aseguraremos que los divs .thumb tengan ciertas dimensiones, y que las imágenes de fondo las cubran correctamente:

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

Buen trabajo, esto da como resultado lo siguiente:

Artículo Flexbox

Ahora queremos que el nombre del autor esté alineado en la parte inferior de la tarjeta, independientemente de cuánto contenido haya por encima de él. Aquí es donde Flexbox resulta útil de nuevo:

.card article {
  padding: 20px;
  flex: 1;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Estamos usando la abreviatura flex: 1; para declarar que este elemento flex (que todavía es hijo del contenedor flex original) debe crecer para ocupar todo el espacio disponible.

Entonces, declaramos que el artículo es un contenedor flex por derecho propio, y de nuevo estamos declarando flex-direction: column; para obtener una distribución en vertical. Por último, justify-content: space-between; define que todos los elementos flex dentro de él deben extenderse uniformemente a lo largo del eje, con igual espacio entre ellos.

Es todo genial, pero nos deja estos extraños párrafos en medio de nuestras tarjetas.

Para alinearlos correctamente, vamos a añadir a estos flex-grow: 1; (o simplemente flex: 1;), con lo que conseguimos que llenen todo el espacio vertical, alineándose perfectamente por arriba.

1	.card p {
2	flex: 1; /* make p grow to fill available space*/
3	line-height: 1.4;
4	}

!Mucho mejor!

Alterar Grid

Ahora ya lo tenemos prácticamente todo resuelto, pero hay todavía una cosa que Grid nos permite hacer ahora que cambiará totalmente el diseño colocando nuestros elementos grid allí donde nos guste, y con el tamaño que queramos. En esta demo, hemos querido hacer la primera tarjeta (vamos a llamarla nuestro "tarjeta destacada") con una anchura igual a dos columnas para cualquier tamaño de pantalla a excepción de las más pequeñas.

En nuestra primera media query, vamos a hacer lo siguiente:

@media only screen and (min-width: 500px) {

    ...
    
  .item-1 {
    grid-column: 1/ span 2;
  }
  
}

Vuelve a nuestro tutorial de introductorio sobre las áreas grid, aquí estamos indicando que, más allá de 500px, el primer elemento debe comenzar en la línea de la retícula 1 y que debe abarcar dos tramos. El resto de los elementos de la retícula ocuparán su lugar automáticamente.

Dentro de esta misma media query también he tocado el tamaño de la fuente (font-size) del titular de nuestra tarjeta destacada.

Conclusión

Este ha sido un buen ejercicio sobre el uso de Grid con Flexbox; con Grid gestionamos nuestro diseño en las dos dimensiones principales, y después, con Flexbox manejamos la distribución vertical de los elementos dentro de nuestras tarjetas. ¡Diviértete jugando con esto!

Lecturas Complementarias

Serie de tutoriales Comprender la Maquetación con CSS Grid
Should I use Grid or Flexbox? por Rachel Andrew
Designing Card-Based User Interfaces en Smashing Magazine
bbc.co.uk beta homepage
Quick Tip: Add a @supports CSS File to Your CodePen Demos