, una para el autor, y tal vez incluso una

para mas informacion.

Fundamentos de la red

Ahora comencemos algunos estilos organizando cada uno de estos elementos en una cuadrícula. 

Nota: si esta es su primera incursión en "Cuadrícula", puede ponerse al día leyendo los tutoriales iniciales en Descripción del diseño de cuadrícula de CSS.

Primero iremos a la telefonía móvil aquí, así que los primeros estilos le darán a nuestra envoltura un ancho y centro, luego estableceremos algunas reglas de cuadrícula:

.banda ancho: 90%; ancho máximo: 1240px; margen: 0 auto; pantalla: rejilla; rejilla-plantilla-columnas: 1fr; rejilla-plantilla-filas: auto; rejilla: 20px; 

Lo más importante, aquí estamos afirmando que nuestra .banda estarán pantalla: rejilla;. Entonces declaramos rejilla-plantilla-columnas de 1 fr, que dice que cada columna ocupará una sola fracción de las disponibles. Solo hemos declarado uno por ahora, por lo que cada columna llenará todo el ancho..

Entonces declaramos rejilla-plantilla-filas: auto;. Este es realmente el valor predeterminado, por lo que podríamos haberlo omitido, y significa que las alturas de las filas estarán determinadas únicamente por el contenido.

Por último definimos una rejilla de 20px, Lo que nos da nuestras columnas y filas de canales..

Consulta de Medios Numero Uno

En vistas más amplias (500px es completamente arbitrario), cambiaremos la rejilla-plantilla-columnas Para darnos un posible dos cartas por fila. Ahora hay dos columnas, cada una de las cuales es una de las dos fracciones disponibles.

Pantalla solo @media y (ancho mínimo: 500 px) .band grid-template-columns: 1fr 1fr; 

Media Query Numero Dos

Por último, para pantallas más grandes vamos a ir con un diseño de cuatro columnas.

Pantalla de solo media y (ancho mínimo: 850 px) .band grid-template-columns: 1fr 1fr 1fr 1fr; 

Aquí podríamos igualmente haber escrito repetir (4, 1fr) en lugar de 1fr 1fr 1fr 1fr. Para más información sobre cómo fr la unidad funciona, echa un vistazo a CSS Grid Layout: Columnas fluidas y mejores canales.

Entonces, ¿qué nos ha dado eso??

El estilo de las tarjetas

Eso nos ha dado un diseño de cuadrícula bastante sólido, y si eres fanático del brutalismo es posible que desees mantener este tipo de cosas, pero para todos los demás, hagamos que nuestras cartas se vean un poco más como cartas..

Comenzaremos con esto:

.tarjeta fondo: blanco; texto-decoración: ninguno; color: # 444; box-shadow: 0 2px 5px rgba (0,0,0,0.1); pantalla: flexión; dirección flexible: columna; min-altura: 100%; 

Esto nos da algunos estilos básicos: un fondo blanco, sin subrayado para el texto, un color gris y un aspecto limpio sombra de la caja para darnos algo de profundidad.

A continuación declaramos que la tarjeta es pantalla: flexión;. Esto es importante: alinearemos el contenido de la tarjeta verticalmente, utilizando Flexbox. Por lo tanto también declaramos dirección flexible: columna; Para darnos nuestro eje vertical. Por último declaramos min-altura: 100%; para que todas las tarjetas llenen la altura del padre (nuestro elemento de cuadrícula). ¡Buen trabajo! Eso nos da esto:

Hover State

Hagamos un par de otras mejoras antes de profundizar en Flexbox. Agrega un posición: relativa; y un transición para que podamos mover la tarjeta en el hover:

 posición: relativa; arriba: 0; transición: toda la facilidad .1s;

Luego, en el hover, levante la tarjeta ligeramente y haga que la sombra sea más pronunciada:

.tarjeta: hover top: -2px; box-shadow: 0 4px 5px rgba (0,0,0,0.2); 

Tipografía

Ahora agregaremos algunos estilos generales a la tipografía para alterar los colores y el espaciado..

.artículo de la tarjeta relleno: 20px;  / * tipografía * / .card h1 font-size: 20px; margen: 0; color: # 333;  .card p line-height: 1.4;  .card span font-size: 12px; font-weight: negrita; color: # 999; transformación de texto: mayúsculas; espacio entre letras: .05em; margen: 2em 0 0 0; 

Esto es lo que deberías tener:

Miniaturas

Cada miniatura se aplicará como una imagen de fondo, por lo que agregaremos un marcado en el tablero, como este:

Ahora nos aseguraremos de que el .pulgar Los divs tienen algunas dimensiones, y que las imágenes de fondo los llenen correctamente:

.tarjeta .thumb fondo de relleno: 60%; tamaño de fondo: cubierta; posición de fondo: centro centro; 

Buen trabajo, eso nos da esto:

Artículo de Flexbox

Ahora queremos que el nombre del autor se alinee en la parte inferior de la tarjeta, independientemente de la cantidad de contenido que haya sobre ella. Aquí es donde viene Flexbox de nuevo:

.artículo de la tarjeta relleno: 20px; flex: 1; pantalla: flexión; dirección flexible: columna; justificar contenido: espacio intermedio; 

Estamos usando la taquigrafía flex: 1; para indicar que este elemento flexible (todavía es un elemento secundario del contenedor flexible original) debe crecer para ocupar todo el espacio disponible.

Luego, declaramos que el artículo es un contenedor flexible por derecho propio, y nuevamente estamos declarando dirección flexible: columna; Para darnos la distribución vertical. Por último, justificar contenido: espacio intermedio; establece que todos los elementos de flexión dentro de ella deben estar distribuidos uniformemente a lo largo del eje, con el mismo espacio entre.

Eso es genial, pero nos da estos párrafos extraños y errantes en medio de nuestras cartas..

Para alinearlos correctamente, vamos a añadir flex-grow: 1; (o simplemente flex: 1;) a ellos, por lo que llenan todo el espacio vertical restante, alineando muy bien a la parte superior.

.tarjeta p flex: 1; / * hacer p crecer para llenar el espacio disponible * / line-height: 1.4; 

Mejor!

Alterando la rejilla

En este punto ya estamos casi cerrados, pero lo único que Grid nos permite hacer ahora es cambiar completamente el diseño colocando nuestros elementos de la cuadrícula donde nos guste y en el tamaño que queramos. Para esta demostración, quisimos que la primera tarjeta (llamémosla nuestra "tarjeta destacada") tenga dos columnas de ancho para cualquier otra cosa que no sea la vista más pequeña..

En nuestra primera consulta de medios, hagamos esto:

Pantalla solo @media y (ancho mínimo: 500 px) … elemento-1 cuadrícula-columna: 1 / tramo 2; 

Volviendo a nuestro tutorial introductorio sobre áreas de cuadrícula, aquí estamos diciendo que, más allá de 500px, el primer elemento debe comenzar en la línea de cuadrícula 1 y abarcar dos pistas. El resto de los elementos de la rejilla se colocan automáticamente en su lugar..

Dentro de esta misma consulta de medios también he golpeado el tamaño de fuente del encabezado en nuestra tarjeta destacada.

Conclusión

Este ha sido un buen ejercicio en el uso de Grid con Flexbox; Grid manejó nuestro diseño bidimensional principal, luego Flexbox manejó la distribución vertical de elementos dentro de nuestras tarjetas. Diviértete jugando con eso!

Otras lecturas

• Entendiendo la serie de tutoriales CSS Grid Layout
• ¿Debo usar Grid o Flexbox? por Rachel Andrew
• Diseño de interfaces de usuario basadas en tarjetas en la revista Smashing
  
• Página de inicio de bbc.co.uk beta
• Consejo rápido: agregue un archivo CSS @supports a sus demostraciones de CodePen