Share
In questa serie abbiamo acquisito familiarità con la sintassi di Grid, imparato a conoscere alcuni modi efficienti di disporre gli elementi su una pagina e abbiamo detto addio ad alcune vecchie abitudini. In questo tutorial applicheremo tutto questo ad un pratico web design reattivo.
Usiamo la demo da dove l'avevamo interrotta l'ultima volta.
Comprende due griglie dichiarate; la nostra griglia principale e la griglia annidata all'interno di uno dei nostri articoli. Possiamo controllare quando queste griglie entrano in vigore utilizzando le query multimediali, il che significa che possiamo ridefinire completamente il nostro layout a diverse larghezze di viewport.
Inizia duplicando la prima dichiarazione della griglia e avvolgendo il duplicato in una query multimediale mobile-first (sto usando 500px come punto di interruzione, ma è completamente arbitrario):
.grid-1 / * stili di dichiarazione della griglia * / @media solo schermo e (min-larghezza: 500px) .grid-1 / * stili di dichiarazione della griglia * /
Ora, nella prima dichiarazione cambieremo il modo in cui viene definita la nostra griglia, ponendo il tutto in un'unica colonna. Elencheremo solo una colonna nel nostro grid-template-colonne regola, assicurati che le quattro righe che ora abbiamo siano definite con grid-template-righe, e organizzare il layout con Grid-template-aree:
.grid-1 display: grid; larghezza: 100%; margine: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; intercapedine: 10px; grid-template-areas: "header" "main" "sidebar" "footer";
Abbiamo anche fatto il nostro grid-gap solo 10px per impostazione predefinita, per tenere conto di schermi più piccoli.
Ecco cosa ci dà. Noterai che stiamo anche utilizzando la nostra query multimediale per modificare il imbottitura e dimensione del font sulla nostra .grid-1 div elementi.
Quello si occupa del layout principale, ma abbiamo ancora la griglia nidificata che rimane ostinatamente nel suo layout a due colonne in tutte le circostanze. Per risolvere il problema, faremo esattamente lo stesso di prima, ma utilizzando un punto di interruzione diverso per suggerire un approccio content-first:
.item-2 / * stili di dichiarazione della griglia * / @media solo schermo e (min-larghezza: 600px) .item-2 / * stili di dichiarazione della griglia * /
Controlla il risultato finale su CodePen.
Un paio di cose da notare qui:
Un altro approccio (di tipo) reattivo a Grid è adatto per i layout di tipo muratura; blocca le dimensioni e il flusso automaticamente, a seconda della vista.
Il nostro approccio fino ad ora è stato quello di dettare quante piste ci sono e guardare gli oggetti si adattano di conseguenza. Questo è ciò che sta accadendo in questa demo; noi abbiamo grid-template-columns: repeat (4, 1fr); che dice "crea quattro colonne, e rendi ognuna una singola unità di ampiezza".
Con il auto-fill parola chiave possiamo dettare come largo le nostre tracce sono e lascia che Grid calcoli quante ne saranno in grado nello spazio disponibile. In questa demo che abbiamo usato grid-template-columns: repeat (auto-fill, 9em); che dice "fai in modo che le colonne siano larghe 9em ciascuna e si adatti il più possibile al contenitore della griglia".
Nota: questo prende anche le nostre grondaie, il grid-gap, in considerazione.
Il contenitore in queste demo ha uno sfondo scuro per mostrare chiaramente lo spazio disponibile e vedrai che non è stato completamente riempito nell'ultimo esempio. Quindi, come lo facciamo??
Il minimo Massimo() la funzione ci consente di impostare una dimensione minima e una massima per una traccia, consentendo alla griglia di funzionare al loro interno. Ad esempio, potremmo installare tre colonne, le prime due sono di larghezza 1fr, l'ultima è un massimo di 1fr, ma non più piccola di 160px:
grid-template-columns: 1fr 1fr minmax (160px, 1fr);
Tutte le colonne si restringeranno man mano che schiacci la finestra, ma l'ultima colonna verrà spinta solo fino a quel momento. Guarda.
Di nuovo al nostro auto-fill demo, se dovessimo cambiare la larghezza della colonna per minmax (9em, 1fr) La griglia posiziona il maggior numero possibile di tracce 9em, ma poi le espande ad un massimo di 1fr fino a riempire il contenitore:
Avvertimento: La griglia ricalcola le tracce dopo il ricaricamento della pagina (prova a schiacciare la finestra del browser e a fare il refresh) ma non lo farà al ridimensionamento della finestra. Le query multimediali possono essere utilizzate per modificare i valori, ma non funzioneranno correttamente con il ridimensionamento delle finestre.
Concludiamo con alcuni proiettili:
Accentsconagua
Grid-template-aree (e altre cose) per diversi scenari.auto-fill la parola chiave è utile per riempire i contenitori della griglia.minimo Massimo() complementi di funzione auto-fill graziosamente, assicurandosi che i contenitori siano correttamente riempiti, ma non ci dà "reattività" nel vero senso della parola.Con le lezioni apprese in questa serie, sei armato per uscire e iniziare a giocare con Grid! Resta sintonizzato per ulteriori tutorial Grid, esercizi pratici, soluzioni ai problemi di layout comuni e aggiornamenti.
