Ancho y relleno de las tarjetas

Ya creamos la navegación y vimos que podemos combinar grid y flexbox en un mismo componente, que los márgenes y el relleno verticales se comportan de forma distinta en las cajas en línea y de bloque, y que el contenido puede desbordar un contenedor. Veamos qué otros problemas aparecen al distribuir el contenido de un componente.

Crearemos otro componente: una lista de tarjetas. Es muy habitual en sitios de noticias, tiendas en línea y galerías de fotos.

Esta lista se parece un poco a la que usamos en la parte anterior, cuando aprendimos a distribuir los grandes bloques de una página. La diferencia es que ahora la cantidad de columnas puede variar y debe adaptarse al ancho de la ventana del navegador.

En la navegación tomamos del diseño las medidas de los espacios. Esta vez también tomaremos el ancho de cada tarjeta. Según el diseño, las tarjetas deben tener un ancho fijo que no dependa de la longitud de su texto.

.element {
  width: 200px;
}

Recuerda que la propiedad width establece el ancho del contenido y no incluye el relleno.

La lista de tarjetas es una caja de bloque situada directamente dentro de <body>. Por eso ocupa todo el ancho de la página. De forma predeterminada, este ancho depende de la ventana del navegador, pero, para facilitar las pruebas, daremos temporalmente otro ancho a <body> con la propiedad width. En los próximos ejercicios cambiaremos su valor para simular distintos anchos de ventana y variar la cantidad de columnas. Así podremos probar la distribución.

Empezaremos la lista de tarjetas. Estableceremos el ancho de <body>, pondremos a cero los márgenes predeterminados de la lista y cambiaremos su relleno. Después tomaremos del diseño el relleno y el ancho de las tarjetas.