, un per l'autore, e forse anche a

per qualche informazione in più.

Nozioni di base sulla griglia

Ora diamo il via ad alcuni stili disponendo ognuno di questi elementi in una griglia. 

Nota: se questa è la tua prima incursione in "Grid" potresti voler imparare a leggere leggendo le esercitazioni iniziali in Capire il Grid Layout di CSS.

Andremo su dispositivi mobili per primi qui, quindi i primi stili daranno larghezza e centratura al nostro wrapper, quindi imposteremo alcune regole Grid:

.banda larghezza: 90%; larghezza massima: 1240 px; margine: 0 auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; intercapedine: 20px; 

Soprattutto, qui stiamo affermando che il nostro .gruppo musicale sarà display: grid;. Quindi dichiariamo grid-template-colonne di 1FR, che dice che ogni colonna occuperà una singola frazione di quelle disponibili. Ne abbiamo dichiarato solo uno per ora, quindi ogni colonna occuperà l'intera larghezza.

Quindi affermiamo grid-template-rows: auto;. Questo è in realtà il valore predefinito, quindi avremmo potuto ometterlo e significa che l'altezza delle righe sarà determinata esclusivamente dal contenuto.

Infine definiamo a grid-gap di 20px, che ci dà la nostra colonna e le grondaie di fila.

Media Query Numero Uno

Su finestre più ampie (500px è completamente arbitrario), cambieremo il grid-template-colonne per darci un possibile due carte per riga. Ora ci sono due colonne, ognuna delle quali è una delle due frazioni disponibili.

@media solo schermo e (min-width: 500px) .band grid-template-columns: 1fr 1fr; 

Media Query Numero Dos

Infine, per schermi più grandi andremo con un layout a quattro colonne.

@media solo schermo e (min-width: 850px) .band grid-template-columns: 1fr 1fr 1fr 1fr; 

Qui potremmo ugualmente aver scritto ripeti (4, 1fr) invece di 1fr 1fr 1fr 1fr. Per ulteriori informazioni su come fr unità funziona, controlla layout griglia CSS: colonne fluide e Better Gutters.

Quindi cosa ci ha dato questo?

Disegnare le carte

Questo ci ha dato un layout di griglia piuttosto solido, e se sei un fan del brutalismo potresti voler mantenere cose come questa, ma per tutti gli altri facciamo in modo che le nostre carte assomiglino un po 'alle carte.

Inizieremo con questo:

.carta sfondo: bianco; decorazione del testo: nessuna; colore: # 444; box-shadow: 0 2px 5px rgba (0,0,0,0,1); display: flex; direzione della flessione: colonna; altezza minima: 100%; 

Questo ci dà alcuni stili di base: uno sfondo bianco, nessuna sottolineatura per il testo, un colore grigio e un accurato box-ombra per darci un po 'di profondità.

Quindi dichiariamo la carta display: flex;. Questo è importante: allineeremo il contenuto della carta verticalmente, usando Flexbox. Quindi affermiamo anche direzione della flessione: colonna; per darci il nostro asse verticale Infine dichiariamo altezza minima: 100%; in modo che tutte le carte riempiano l'altezza del genitore (il nostro elemento della griglia). Buon lavoro! Questo ci dà questo:

Hover State

Facciamo un paio di altri miglioramenti prima di immergerci ulteriormente in Flexbox. Aggiungere un posizione: relativa; e a transizione in modo che possiamo spostare la carta su hover:

 posizione: relativa; inizio: 0; transizione: all .1s ease-in;

Quindi, al passaggio del mouse, solleva leggermente la carta e rendi l'ombra più pronunciata:

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

Tipografia

Ora aggiungeremo alcuni stili generali alla tipografia per modificare i colori e la spaziatura.

.card article padding: 20px;  / * typography * / .card h1 font-size: 20px; margine: 0; colore: # 333;  .card p line-height: 1.4;  .card span font-size: 12px; font-weight: bold; colore: n. 999; text-transform: maiuscolo; letter-spacing: .05em; margine: 2em 0 0 0; 

Ecco cosa dovresti avere:

miniature

Ogni miniatura verrà applicata come immagine di sfondo, quindi aggiungeremo alcuni markup su tutta la lavagna, in questo modo:

Ora ci assicureremo il .pollice le div hanno alcune dimensioni e le immagini di sfondo le riempiono correttamente:

.card .thumb padding-bottom: 60%; dimensione di sfondo: copertina; posizione di sfondo: centro; 

Buon lavoro, questo ci dà questo:

Articolo Flexbox

Ora vogliamo che il nome dell'autore sia allineato nella parte inferiore della carta, indipendentemente da quanto contenuto ci sia sopra. È qui che entra di nuovo Flexbox:

.card article padding: 20px; flex: 1; display: flex; direzione della flessione: colonna; justify-content: space-between; 

Stiamo usando la stenografia flex: 1; per affermare che questo oggetto flessibile (è ancora un bambino del contenitore flex originale) dovrebbe crescere per occupare tutto lo spazio disponibile.

Quindi, dichiariamo che l'articolo è un contenitore flessibile a sé stante, e di nuovo lo dichiariamo direzione della flessione: colonna; per darci una distribuzione verticale. infine, justify-content: space-between; afferma che tutti gli elementi flessibili al suo interno dovrebbero essere distribuiti uniformemente lungo l'asse, con una spaziatura uguale tra loro.

È tutto fantastico, ma ci dà questi strani paragrafi vaganti nel mezzo delle nostre carte.

Per allinearli correttamente, aggiungiamo flex-grow: 1; (o semplicemente flex: 1;) a loro, così riempiono tutto lo spazio verticale rimanente, allineandosi piacevolmente alla cima.

.carta p flex: 1; / * far crescere p per riempire lo spazio disponibile * / line-height: 1.4; 

Meglio!

Alterazione della griglia

A questo punto siamo praticamente impacchettati, ma l'unica cosa che la Grid ci permette di fare ora è cambiare completamente il layout posizionando i nostri elementi della griglia ovunque ci piacciono, e con qualsiasi dimensione ci piaccia. Per questa demo, volevamo creare la prima carta (chiamiamola la nostra "carta in primo piano") con due colonne di larghezza diversa da quelle più piccole.

Nella nostra prima query multimediale, facciamolo:

@media solo schermo e (min-width: 500px) ... articolo-1 grid-column: 1 / span 2; 

Tornando al nostro tutorial introduttivo sulle aree della griglia, qui stiamo dicendo che, oltre 500px, il primo elemento dovrebbe iniziare sulla linea della griglia 1 e attraversare due tracce. Il resto degli elementi della griglia si posizionano automaticamente.

All'interno di questa stessa query multimediale ho anche urtato il dimensione del font del titolo nella nostra carta in primo piano.

Conclusione

Questo è stato un buon esercizio nell'uso di Grid con Flexbox; Grid ha gestito il nostro layout bidimensionale principale, quindi Flexbox ha gestito la distribuzione verticale degli elementi all'interno delle nostre carte. Divertiti a giocarci!

Ulteriori letture

• Comprensione delle serie di tutorial di Grid Layout CSS
• Dovrei usare Grid o Flexbox? di Rachel Andrew
• Progettazione di interfacce utente basate su schede su Smashing Magazine
  
• homepage di bbc.co.uk beta
• Suggerimento rapido: aggiungi un @supports file CSS alle tue demo CodePen