elementi per essere i nostri elementi della griglia.

Un paio di pannelli contengono del testo, ma il resto sarà per le nostre immagini comiche. Abbiamo due opzioni qui: possiamo posizionare le nostre immagini in linea all'interno dei pannelli o aggiungere immagini tramite CSS. Sto facendo quest'ultimo perché consente un controllo più facile sul posizionamento e il dimensionamento della grafica, ma si potrebbe sostenere che le immagini in linea sarebbero più accessibili. La tua scelta.

2. Stili di base

Per far rotolare la palla, aggiungiamo alcuni stili per coprire la nostra tipografia e i nostri colori:

/ * concetti di base * / body background: # f8f7f2; imbottitura: 0 10%; font: 100% / 1.5 'Kalam', corsivo;  h1 margine: 0; altezza della linea: 1; imbottitura: 10px; colore: # 251b19;  p margin: 0; imbottitura: 10px; colore: # 251b19; font-size: 1.2em; a color: # e56633;  a: hover text-decoration: none;  

Ho scelto Kalam come carattere web di Google per il nostro testo: il suo stile scritto a mano è perfetto per i fumetti. Dovrai collegarlo nel tuo CSS o tramite un link nel tuo documento:

Kalam su Google Fonts

3. La nostra griglia

Iniziando con il primo cellulare, sistemeremo le cose in una colonna con un singolo pannello su ogni riga:

.grid-1 display: grid; larghezza: 100%; larghezza massima: 770 px; margine: 10% automatico; grid-template-columns: 1fr; grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto; intercapedine: 25px; 

Guardando indietro ai nostri precedenti tutorial Grid te lo ricorderai grid-template-colonne assegna quante colonne avremo e quanto saranno ampie. grid-template-righe fa lo stesso per le righe; qui ne stiamo definendo undici. Quelle che contengono le immagini saranno alte 200px, quelle con testo avranno dimensioni automaticamente in base al contenuto. Finalmente, grid-gap definisce la nostra dimensione di grondaia.

Aggiungiamo ora alcuni stili generali ai nostri pannelli:

.panel color: white; background-repeat: no-repeat; posizione di sfondo: centro; dimensione di sfondo: copertina; box-shadow: 0px 0px 0px 5px # 251b19; 

Il sfondo le proprietà non hanno ancora alcun impatto visivo, ma lo faranno non appena aggiungeremo alcune immagini di sfondo. E il box-ombra funge da confine. Puoi anche usare il tradizionale confine proprietà qui se preferisci, ma a volte box-shadow dà più flessibilità.

Vediamo quello che abbiamo finora!

4. Immagini di gatti

Per cosa è stata creata Internet, giusto? Ho preparato alcune immagini SVG da aggiungere ai pannelli, che faccio uno per uno:

.panel-1 background-image: url (cat-1.svg); 

Guardando bene!

Ma non voglio confini in giro tutti i pannelli. Li rimuoverò (usando box-shadow: none;) da quelli contenenti testo, insieme alla prima immagine e all'immagine finale.

5. Media query

Queste immagini non funzionano ancora perfettamente; il povero vecchio Barry si sta facendo un bel taglio. È tempo di guardare oltre il mobile e modificare la nostra griglia per finestre più grandi. Aggiungiamo alcune domande sui media; uno a 400px e uno a 600px (figure arbitrarie, usa quello che vuoi):

/ * media query 1 * / @media solo schermo e (min-width: 400px)  / * media query 2 * / @media solo schermo e (min-larghezza: 600px) 

Li useremo per modificare il layout della griglia in ogni caso.

/ * media query 1 * / @media solo schermo e (min-width: 400px) .grid-1 grid-template-columns: repeat (2, 1fr); grid-template-rows: auto 200px auto 200px 200px auto 200px auto;  / * media query 2 * / @media solo schermo e (min-larghezza: 600px) .grid-1 grid-template-columns: repeat (3, 1fr); grid-template-rows: auto 200px 200px 200px auto; 

Stiamo andando per due colonne e otto righe per schermi leggermente più grandi, quindi tre colonne e cinque righe per ancora più grandi.

Spanning

Ora siamo usciti dai nostri vincoli a colonna singola, possiamo essere un po 'più creativi. Abbiamo bisogno, ad esempio, del nostro titolo per correre lungo la larghezza dell'intero fumetto. Lo stesso vale per i pannelli contenenti testo e la dichiarazione sul copyright. Anche alcune delle immagini sarebbero meglio servite in pannelli a tutta larghezza. Quindi aggiungeremo questi dettagli alla prima delle nostre query multimediali:

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

Ho cambiato la tipografia anche in un paio di casi, alla fine dandoci:

La nostra disposizione a due colonne è eccezionale! Tuttavia, il nostro fumetto a tre colonne deve essere corretto.

Funziona quasi ...

6. Fissando il nostro layout a tre colonne

Dato che stiamo lavorando per la prima volta su dispositivi mobili, le regole applicate alla nostra prima query multimediale hanno ancora effetto sul più grande degli schermi. Abbiamo bisogno di lavorare attraverso i pannelli e ripristinare alcuni stili. 

Inizia facendo il .Pannello-titolo si estendono su tre colonne, anziché solo due. Poi .pannello-3 (con il testo) può essere impostato su grid-column: span 1; o grid-column: auto;

Lo stesso vale per .Pannello-6. Con un paio di altre modifiche dovresti finire con qualcosa del genere:

Un po 'di Flexbox

Mi piacerebbe che il primo bit di dialogo fosse centrato verticalmente, quindi usiamo flexbox per farlo. Aggiungi quanto segue alla seconda query multimediale:

 .panel-3 display: flex; align-items: center; 

Prima della flexbox, dopo la flexbox

7. Sovrapposizione di pannelli

La griglia non ci limita a blocchi equidistanti che corrono lungo una pagina, possiamo tranquillamente sovrapporre anche i nostri pannelli. Stiamo rendendo un po 'più interessante il nostro ultimo bit di testo assegnandolo alla stessa posizione della griglia del pannello successivo: 

 .panel-7 grid-column: 1; grid-row: 4; z-index: 1;  .panel-8 grid-column: 1 / span 2; grid-row: 4; 

Qui, abbiamo posizionato entrambi .Pannello-7 e .Pannello-8 a grid-column: 1; e grid-row: 4;. Ciò significa che sono entrambi nello stesso posto, con quello che appare in secondo luogo nel DOM che è sovrapposto al primo.

Possiamo usare z-index per modificare l'ordine di impilamento, quindi dare .Pannello-7 un z-index: 1; lo porta in cima:

Nota: ora che abbiamo effettivamente rimosso una riga, dovrai controllare la tua grid-template-righe sono ok. 

Aggiungiamo un po 'più di stile al nostro "Naaah". Di nuovo, gli elementi della griglia non sono limitati quanto si potrebbe pensare: possiamo spostarli con margini negativi e persino trasformarli senza alcun problema. Ho aggiunto alcuni stili al pannello e il paragrafo al suo interno per dare questo:

Conclusione

Ben fatto: ecco cosa abbiamo costruito!

Questo è stato un esercizio divertente nell'uso di CSS Grid, mentre ti introducevo ad alcuni nuovi concetti di Grid lungo la strada. Spero che ti sia piaciuto, ora se non ti dispiace, vado a fare un sonnellino.

Ulteriori letture

• Comprendere le serie per principianti di Grid Layout CSS
• Sleepy Fat Cat Typeface su GraphicRiver
• La meccanica dei fumetti
• Comprendere i fumetti di Scott McCloud