Accentsconagua
Share
Il modo in cui affrontiamo il layout sul web sta cambiando e in prima linea in questo cambiamento c'è il layout griglia CSS. Questa guida di avvio rapido aggiornata salterà i dettagli e le sfumature, invece ti aiuterà a rimanere bloccata, proprio ora.
Il layout della griglia CSS (noto ai suoi amici come "Grid") ha fatto passi da gigante nell'ultimo anno e, come tale, al giorno d'oggi il supporto del browser è abbastanza solido.
caniuse.comLa griglia ci consente di disporre elementi in una pagina, in base alle regioni create dalle guide.
Al loro più semplice queste guide, o linee della griglia, cornice orizzontale e verticale tracce di griglia. Le tracce della griglia servono come righe e colonne, con grondaie correndo tra di loro. Dove le tracce di griglia orizzontali e verticali si intersecano, ci rimane cellule, molto come usiamo con le tabelle. Questi sono tutti termini importanti da capire.
Nell'immagine seguente vedrai una griglia dimostrativa, che mostra:
Una griglia di base, che evidenzia le linee della griglia, le colonne, le righe e le cellePer un layout grafico, potrebbe sembrare più familiare se usiamo esattamente la stessa griglia, ma parte di alcune tracce per darci dei grondaie tra le aree di contenuto.
La stessa griglia, ma questa volta ha una sorprendente somiglianza con la bandiera finlandeseC'è un ultimo termine che dobbiamo chiarire prima di procedere:
Una delle tante possibili aree della griglia sulla nostra griglia demoUN area della griglia è qualsiasi parte della nostra griglia recintata da quattro linee della griglia; può comprendere un numero qualsiasi di celle della griglia.
È ora di costruire questa griglia nel browser! Iniziamo con qualche markup.
Per ricreare la griglia di cui sopra, abbiamo bisogno di un elemento contenitore; niente che ti piace:
In esso metteremo nove elementi figlio.
Forchetta questa penna iniziale se vuoi seguirla. Ho aggiunto alcuni stili di base per differenziare visivamente ogni elemento della griglia.
In primo luogo, dobbiamo dichiarare che il nostro elemento contenitore è una griglia che utilizza un nuovo valore per il display proprietà:
.grid-1 display: grid;
Giusto, è stato facile. Quindi dobbiamo definire la nostra griglia, dichiarando quante tracce di griglia avrà, sia orizzontalmente che verticalmente. Lo facciamo con il grid-template-colonne e grid-template-righe proprietà:
.grid-1 display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto;
Noterai tre valori per ciascuno. I valori per grid-template-colonne affermare che "tutte e tre le colonne dovrebbero essere larghe 150 px". I tre valori per grid-template-righe indicare qualcosa di simile. Ognuno sarebbe in realtà auto per impostazione predefinita, prendendo altezza dal contenuto, ma li abbiamo indicati qui per visualizzare chiaramente cosa sta succedendo.
Quindi cosa abbiamo ora?
A ciascuno dei nostri articoli è stata assegnata automaticamente un'area di griglia in ordine cronologico. Non è male, ma ci mancano le grondaie. È ora di aggiustarlo.
Grid viene fornito con una soluzione specifica per la dichiarazione delle misure di gronda. Possiamo usare grid-column-gap e grid-fila-gap, o la stenografia grid-gap proprietà.
Aggiungiamo una grondaia fissa di 20px alla nostra .grid-1 elemento.
.grid-1 display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto; intercapedine: 20px;
E ora, ci rimane una griglia bella e ordinata:
È tutto, sei attivo e in esecuzione con Grid! Ricapitoliamo i quattro passaggi essenziali:
display: grid;.grid-template-colonne e grid-template-righe proprietà.grid-gap proprietà.Nella parte successiva di questa serie daremo un'occhiata più approfondita alla sintassi di Grid, esploreremo i layout flessibili, i fr unità, il ripetere() funzione, e prendiamo la nostra semplice griglia molto più lontano. Ci vediamo lì!
