Elementos para ser nuestros elementos de la rejilla..

Un par de paneles tienen texto, pero el resto será para nuestras imágenes cómicas. Tenemos dos opciones aquí: podemos colocar nuestras imágenes en línea dentro de los paneles o agregar imágenes a través de CSS. Estoy haciendo lo último porque permite un control más sencillo sobre la ubicación y el tamaño de los gráficos, pero se podría argumentar que las imágenes en línea serían más accesibles. Tu elección.

2. Estilos básicos

Para hacer rodar la bola (de la piel), agreguemos algunos estilos para cubrir nuestra tipografía y colores:

/ * conceptos básicos * / body background: # f8f7f2; relleno: 0 10%; fuente: 100% / 1.5 'Kalam', cursiva;  h1 margen: 0; línea de altura: 1; relleno: 10px; color: # 251b19;  p margen: 0; relleno: 10px; color: # 251b19; tamaño de letra: 1.2em; a color: # e56633;  a: hover text-decoration: none;  

Elegí a Kalam como la fuente web de Google para nuestro texto, su estilo manuscrito es perfecto para los cómics que reconozco. Deberá conectarlo a su CSS o mediante un enlace en el encabezado de su documento:

Kalam en Google Fonts

3. Nuestra rejilla

Primero iniciando el móvil, colocaremos las cosas en una columna con un solo panel en cada fila:

.grid-1 display: grid; ancho: 100%; ancho máximo: 770px; margen: 10% automático; rejilla-plantilla-columnas: 1fr; cuadrícula-filas-plantilla: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto; rejilla: 25px; 

Mirando hacia atrás a nuestros tutoriales de Grid anteriores recordará que rejilla-plantilla-columnas asigna cuántas columnas tendremos, y qué tan amplias serán. cuadrícula-plantilla-filas hace lo mismo para las filas; Aquí estamos definiendo once de ellos. Las que contengan imágenes tendrán una altura de 200 px, las de texto se ajustarán automáticamente de acuerdo con el contenido. Finalmente, rejilla define nuestro tamaño de canal.

Ahora agreguemos algunos estilos generales a nuestros paneles:

.panel color: blanco; repetición de fondo: no repetición; posición de fondo: centro centro; tamaño de fondo: cubierta; cuadro de sombra: 0px 0px 0px 5px # 251b19; 

los fondo Las propiedades todavía no tienen ningún impacto visual, pero tan pronto como agreguemos algunas imágenes de fondo. Y el sombra de la caja actúa como una frontera. También se puede utilizar tradicional. frontera Propiedades aquí si lo prefiere, pero box-shadow a veces da más flexibilidad..

A ver que tenemos hasta ahora.!

4. Imágenes del gato

¿Para qué se hizo el internet, verdad? He preparado algunas imágenes SVG para agregar a los paneles, que hago una por una:

.panel-1 imagen de fondo: url (cat-1.svg); 

Luciendo bien!

Pero no quiero fronteras alrededor todos los paneles Los quitaré (usando caja de sombra: ninguna;) de los que contienen texto, junto con la primera imagen y la imagen final.

5. Consultas de medios

Estas imágenes no están funcionando perfectamente todavía; El pobre Barry está teniendo algunos cultivos serios. Es hora de mirar más allá de lo móvil y alterar nuestra cuadrícula para obtener vistas más grandes. Vamos a añadir algunas consultas de medios; uno a 400px y otro a 600px (cifras arbitrarias, usa lo que quieras):

/ * pantalla de consulta de medios 1 * / @media y pantalla de (solo ancho: 400 px)  / * consulta de medios 2 * / @ y media (ancho mínimo: 600 px) 

Los utilizaremos para modificar el diseño de la cuadrícula en cada caso..

/ * pantalla de consulta de medios 1 * / @media y (ancho mínimo: 400 px) .grid-1 grillas-plantilla-columnas: repetir (2, 1fr); cuadrícula-filas-plantilla: auto 200px auto 200px 200px auto 200px auto;  / * consulta de medios 2 * / pantalla solo @media y (min-width: 600px) .grid-1 grid-template-columns: repetir (3, 1fr); cuadrícula-filas-plantilla: auto 200px 200px 200px auto; 

Vamos por dos columnas y ocho filas para pantallas un poco más grandes, luego tres columnas y cinco filas para aún más grandes.

Abarcando

Ahora que hemos salido de nuestras restricciones de una sola columna, podemos ser un poco más creativos. Necesitamos, por ejemplo, nuestro título para correr a lo largo de todo el cómic. Lo mismo ocurre con los paneles que contienen texto y la declaración de derechos de autor. Incluso algunas de las imágenes se servirían mejor en paneles de ancho completo. Entonces, agregaremos esos detalles a la primera de nuestras consultas de medios:

 .panel-title, .panel-3, .panel-6, .panel-7, .panel-copyright grid-column: span 2; 

También he cambiado la tipografía en un par de casos, al final, dándonos:

Nuestro diseño de dos columnas se ve muy bien! Sin embargo, nuestro cómic de tres columnas necesita reparaciones..

Casi funciona ...

6. Arreglando nuestro diseño de tres columnas

Mientras trabajamos primero con dispositivos móviles, las reglas que aplicamos a nuestra primera consulta de medios aún tienen efecto en la pantalla más grande. Tenemos que trabajar a través de los paneles y restablecer algunos estilos.. 

Comience por hacer el .título del panel Abarcan tres columnas, en lugar de solo dos. Entonces .panel-3 (con el texto) se puede volver a poner en rejilla-columna: tramo 1; o cuadrícula-columna: auto;

Lo mismo se aplica a .panel-6. Con un par de cambios más, deberías terminar con algo como esto:

Un poco de Flexbox

Me gustaría que el primer diálogo se centrara verticalmente, así que vamos a usar flexbox para hacerlo. Agregue lo siguiente a la segunda consulta de medios:

 .panel-3 display: flex; alinear-elementos: centro; 

Antes de flexbox, después de flexbox

7. Paneles superpuestos

La cuadrícula no nos restringe a bloques equidistantes que se ejecutan a lo largo y hacia abajo de una página, también podemos colocar nuestros paneles felizmente. Vamos a hacer que nuestro bit de texto final sea un poco más interesante asignándolo a la misma ubicación de cuadrícula que el siguiente panel: 

 .panel-7 rejilla-columna: 1; fila de la cuadrícula: 4; índice z: 1;  .panel-8 grid-column: 1 / span 2; fila de la cuadrícula: 4; 

Aquí, hemos colocado tanto .panel-7 y .panel-8 a cuadrícula-columna: 1; y fila de la cuadrícula: 4;. Eso significa que ambos están exactamente en el mismo lugar, con lo que aparece en segundo lugar en el DOM que se apila sobre el primero.

Podemos usar el índice z para alterar el orden de apilamiento, por lo que damos .panel-7 una índice z: 1; lo lleva a la cima:

Nota: Ahora que hemos eliminado una fila, deberás revisar tu cuadrícula-plantilla-filas están bien. 

Agreguemos un poco más de estilo a nuestro "Naaah". Nuevamente, los elementos de la cuadrícula no están tan restringidos como podría pensar, podemos cambiarlos con márgenes negativos e incluso transformarlos sin ningún problema. He añadido algunos estilos al panel y el párrafo dentro de él para dar esto:

Conclusión

Bien hecho, esto es lo que hemos construido.!

Este fue un ejercicio divertido en el uso de CSS Grid, mientras te presentaba algunos nuevos conceptos de Grid en el camino. Espero que lo hayas disfrutado, ahora, si no te importa, me voy a dormir una siesta..

Otras lecturas

• Entendiendo la serie de principiantes de CSS Grid Layout
• Sleepy Fat Cat Typeface en GraphicRiver
• La mecánica de los cómics.
• Understanding Comics por Scott McCloud