Share
In questo tutorial useremo la griglia CSS per aiutarci a creare un "layout grigliato", cosa che è sempre stata difficile con i metodi di layout CSS più tradizionali.
Ecco a cosa stiamo lavorando (dai un'occhiata alla versione più grande per l'effetto completo):
Questo design è basato sul lavoro di Anthony Harmon, il cui lavoro è perfetto per la nostra demo. Dai un'occhiata a questo layout che ha fatto per Rel Acoustics:
Saluti Anthony :)I web designer sono stati condizionati nel corso degli anni per osservare il flusso di documenti e l'ordine di origine; creare layout galleggiando blocchi e lasciandoli riempire la pagina come mattoni da costruzione. Nel mondo del design reattivo questo approccio sembra del tutto naturale. Tuttavia, è molto diverso dal layout di stampa in cui le dimensioni fisse significano che i progettisti possono posizionare con sicurezza testo e immagini esattamente dove vogliono, portando a layout più sperimentali e visivamente audaci.
La griglia CSS, oltre a consentirci di organizzare le cose lungo gli assi xey, può aiutarci a colmare il divario nel layout e diventare un po 'più audaci con i nostri progetti!
"Dobbiamo iniziare a reinventare quale buona grafica può essere con le cose che si sovrappongono". - Jen Simmons
È ora di rimanere bloccati.
Le colonne della griglia non devono essere uniformi. Prendiamo una sezione del layout sopra e vediamo come potrebbe apparire la griglia.
Nota: stiamo solo costruendo una sezione in questo tutorial. Non c'è motivo per cui ciascuna sezione della pagina non possa essere costruita da griglie indipendenti.
Inizieremo con alcuni markup, un contenitore della griglia:
Successivamente, su quel container, dichiareremo display: grid; quindi definire le colonne e le righe.
.grid1 display: grid; grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rows: 100px auto 15px auto auto;
Le colonne sono disposte esattamente come le vedi nell'immagine sopra. Il fr l'unità è una frazione dell'intera larghezza, quindi la prima colonna ne occupa tre, la seconda è più ampia e occupa sei. In totale, il nostro layout comprende 27 unità di proporzioni della griglia, praticamente non classiche!
Le file sono un po 'diverse. Vedrai una miscela di misure fisse di pixel e auto. Dove auto viene utilizzato, la riga crescerà e si restringerà a seconda del contenuto.
Iniziamo con le immagini. Per il markup abbiamo un paio di opzioni; o usiamo img elementi, o usiamo altri elementi con uno sfondo di immagine.
Potremmo usare oggetto-fit: copertura; sopra img elementi, ma è difficile ... perché rendere le nostre vite più difficili ?! Quindi per questa demo andremo con quest'ultima, perché questo ci dà una maggiore flessibilità in termini di come le proporzioni delle immagini cambiano con layout fluidi.
Dì ciao a qualche buon vecchio tuffatore:
Con alcune immagini di sfondo per coprirle:
.img1 background: url (wooden.jpg); dimensione di sfondo: copertina; .img2 background: url (speaker.jpg); dimensione di sfondo: copertina; .img3 background: url (waves.jpg); dimensione di sfondo: copertina;
L'algoritmo di posizionamento automatico della griglia li avrà già inseriti nella nostra griglia, ma diventiamo specifici. Useremo le linee della griglia per dettare dove ogni elemento dovrebbe iniziare e finire.
La nostra prima immagine inizia sulla riga di colonna 1 e termina su 3. Possiamo definire così:
grid-column: 1/3;
o in questo modo:
grid-column: 1 / span 2;
In termini di righe, la nostra prima immagine deve iniziare sulla riga riga 2 e terminare su 5, che possiamo affermare in questo modo:
grid-row: 2/5;
o questo:
grid-row: 2 / span 3;
Facciamo ora lo stesso per le altre due immagini. Questo è quello con cui dovresti finire:
Certo, non è particolarmente impressionante, ma perché la maggior parte delle file non ha ancora altezza. Lo otterranno una volta che inizieremo ad aggiungere più contenuti nel passaggio successivo.
Per maggiori informazioni su come grid-column e grid-fila lavoro, dai un'occhiata a questi tutorial rapidi:
Aggiungiamo ora il contenuto testuale; un blockquote all'interno di un wrapper e il call to action block. Puoi aggiungerli dove preferisci come elementi figlio di .Grid1 contenitore, l'ordine originale non ha importanza.
"Quasi immediatamente, si è sparsa la voce di un gallese che aveva costruito questo incredibile sistema di sub-suoni, e ben presto gli audiofili hanno iniziato a cercare questi sottotitoli leggendari costruiti come nessun altro."Gibilterra
Ti presentiamo 212 / SE, il nostro subwoofer più potente e agile, progettato esclusivamente per sistemi e stanze più grandi, per consentire agli altoparlanti di ultima generazione di passare a una voce piena.
Visualizza dettagli del prodotto →
Quindi, prima di modellare qualcosa, li posizioneremo sulla griglia proprio come abbiamo fatto con le immagini:
.strapline grid-column: 3 / span 3; grid-row: 2 / span 1; .cta-wrapper grid-column: 4 / span 2; grid-row: 4 / span 2;
Guardando meglio!
A questo punto vale la pena notare che puoi giocare con z-index se vuoi. L'impilamento segue l'ordine di origine per impostazione predefinita; ciò che è prima nel markup verrà posizionato in basso, ciò che viene dichiarato in seguito viene visualizzato in alto. Ma se dovessimo candidarci z-index: 1; a .img1 sarebbe impilato sopra .img2.
L'attivazione dell'ispettore del browser ti aiuterà oggi con il layout della griglia. Nell'ispettore di Chrome, selezionando gli elementi verranno visualizzate le linee della griglia e le misurazioni, in questo modo:
L'ispettore di Firefox farà ancora di più, permettendoti di sovrapporre la griglia usando i controlli sotto disposizione scheda. È possibile visualizzare i numeri di riga, i nomi delle aree e navigare nelle aree della griglia in una versione ridotta della miniatura:
Mancia: quando si guarda sotto Regole scheda, tocca l'icona della griglia accanto a display per attivare la sovrapposizione:
Ispezionando la griglia ti renderai subito conto se hai smarrito gli elementi della griglia, hai saltato una riga qua o là o hai nominato qualcosa in modo errato.
Alcune dichiarazioni dei font e stili di pulsanti rapidi avranno questo aspetto ancora migliore, senza troppi sforzi. Inizieremo collegando alcuni tipi di carattere Google nel file del documento:
Usiamo Open Sans per il corpo, Playfair Display per il blockquote e l'intestazione. Appliciamoli:
body color: # 292929; font: 1em / 1.7 'Open sans', sans-serif; blockquote font: italic 1.1em / 2 'Playfair Display', serif; margine: 0 0 2em 0; .cta h1 font: bold 6em / 1 'Playfair Display', serif; margine: 0 0 20 px 0; posizione: relativa;
Ora alcuni stili di pulsanti:
.pulsante display: blocco in linea; colore bianco; decorazione del testo: nessuna; sfondo: # 292929; riempimento: .8em 1.5em; .button: hover background: black;
Infine, allineeremo la blockquote al centro, quindi aggiungeremo un po 'di padding alla call to action, contribuendo a compilare la riga in cui è stata inserita. Ecco cosa dovresti avere ora:
Ricorda che stiamo costruendo il nostro layout per un'ampia vista. Quello che vedi incorporato nel tutorial potrebbe non sembrare ottimale.
Il design a cui stiamo lavorando ha un paio di tocchi visivi che non abbiamo ancora usato. Potremmo aggiungerli in vari modi, ma poiché non lo sono soddisfare in quanto tali, li aggiungeremo usando gli pseudo elementi CSS. In primo luogo, lo scarabocchio sopra il blockquote:
.strapline margin-top: 100px; posizione: relativa; .strapline :: before content: "; display: block; background: url (wavy.svg) repeat-x; background-size: cover; width: 20%; height: .5em; position: absolute; top: - 3em, a sinistra: 40%;
Questi stili usano a ::prima pseudo elemento sul .strapline div, posizionandolo sopra il contenitore stesso usando una posizione superiore negativa. È perfettamente centrato e ti ricorderai che abbiamo lasciato abbastanza spazio definendo la nostra prima riga alta 100 px.
Faremo qualcosa di simile per un badge SVG sull'intestazione:
.cta h1 :: before content: "; display: block; height: 1em; width: 1em; background: url (badge.svg) no-repeat center center; background-size: 80%; position: absolute; left: - 120 px; in alto: 0;
Ancora una volta, stiamo usando uno pseudo elemento perché è semplicemente un effetto visivo piuttosto che un contenuto di valore. Questo non vuol dire che non avresti potuto aggiungerlo come un
Ora ci siamo costruiti un solido layout di griglia rotto! Tempo per alcuni prossimi passi per portarlo ancora più lontano.
Al giorno d'oggi CSS Grid è abbastanza ben supportato, sebbene IE11 richieda ancora una versione con prefisso, quindi potresti voler avvolgere gli stili della griglia in un @supports dichiarazione. Sarebbe simile a questo:
@supports (display: grid) / * grid layout * / .grid1 display: grid; grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rows: 100px auto 15px auto auto; ...
Qualsiasi browser che non supporti correttamente la Grid CSS ignorerà qualsiasi cosa tu abbia inserito in questa dichiarazione, dandoti la possibilità di fornire un fallback.
Dai un'occhiata ai "fallback" di Grid e sostituisci le idee su come modellare i fallback, se vuoi.
Il nostro layout appare nitido su schermi più grandi, ma quando vengono spremuti in finestre più piccole (come quando sono incorporati in questo tutorial) appaiono alcune crepe. Come gestiresti questo in modo reattivo? L'aggiunta di query multimediali ti consentirà di stabilire prima gli stili, quindi di costruire gradualmente per disporre e rendere la griglia più complessa man mano che le finestre si allargano:
.grid1 display: grid; grid-template-columns: 1fr 1fr; @media only screen e (min-width: 768px) .grid1 grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rows: 100px auto 15px auto auto;
Puoi anche scegliere di nascondere quelle sfumature che abbiamo creato su dispositivi più piccoli, salvandoli fino a quando non ci sarà più spazio per lo schermo con cui giocare. La scelta è tua!
Ecco un esempio di come potresti rendere questo particolare design reattivo.
Questo tutorial ti ha dato uno sguardo nel mondo dei layout alternativi ottenibili con CSS Grid. Dimentica i layout che hai praticato con i galleggianti e il posizionamento; rompere quelle vecchie abitudini! Inizia a esplorare layout più complessi e vediamo se possiamo rendere il web un po 'più interessante.
Accentsconagua