Ok, abbiamo capito che queste griglie vanno utilizzate e abbiamo visto insomma come superare anche la paura dello scrolling all'interno delle nostre pagine web.

Ma adesso vediamo come metterlo in pratica, quindi andiamo su Fig.

Ma ritorniamo sul nostro fa il film è ovviamente prima di impostare una griglia dobbiamo impostare la dimensione di è una tavola, quindi di un tram e quindi vi ricordo sempre andiamo qui sul fiume, il tour fra me e andiamo a prendere.

In questo caso io prendo questa misura standard, poi successivamente approfondiamo.

Qual è la misura giusta da cui partire? Adesso prendo mille qua il quaranta per mille e ventiquattro.

Questa è una tavola del mio lei outcome.

Ce le metto queste benedette griglie come ovviamente possono Quali tipi di griglie posso utilizzare? Se vado qui a destra all'interno della della mia paletta di proprietà, troverò una volta cliccato attenzione che se non clicco sulla tavola questa cosa ovviamente non viene fuori.

Troverò la voce degli out grid, basterà cliccare sul più per creare un nuovo tipo di griglia.

Le griglie sul film possono essere di tre tipi una griglia ovviamente orizzontale e verticale, quindi fatta proprio modulare così e si può partire da quella otto che è quella che dicevamo prima.

Una griglia fatta di colonne e una griglia fatta di righe dipende ovviamente da quello che dobbiamo fare é quello lo standard con cui si lavora è quello di lavorare con le colonne.

Ok, quindi mettiamo colonne, abbiamo detto utilizziamo quel framework di base che viene utilizzato moltissimo che Bootstrap Foundation e utilizziamo dodici colonne.

Questo vale per il desktop, mentre per il tablet abbiamo otto colonne per il mobile, quattro o due colonne.

Quindi mettiamo dodici colonne e l'altra, cosa che possiamo impostare oltre.

Ovviamente al colore della nostra griglia possiamo decidere se una griglia stretch quindi che si adatta a seconda della grandezza della tavola.

Quindi l'unico elemento fisso il butter, cioè la distanza delle colonne fissa.

Le colonne invece si adattano a seconda delle out.

Oppure possiamo lavorare con un'impostazione, diciamo fissa incollando diciamo così le la griglia o a sinistra o a destra o al centro.

Chiaramente, in questo contesto dobbiamo fare un po' piu' di calcoli matematici, perché non dando un valore flessibile alla colonna, dobbiamo derivare noi in maniera matematica, quindi diciamo che sappiamo mille e quattro e quaranta.

Forse mi sembra che sessantanove può essere una buona dimensione.

Il gutter si da trentadue di base sul bus tram può essere meglio centrata qui.

Ovviamente io so che per te, per professionalità che sessantanove è il numero delle colonie, la larghezza di una colonna.

Quando lavoriamo con un layout a dimensione fissa, però io vi consiglio di non usarlo quasi mai se non ne rarissimi casi e dopo vediamo quando vi consiglio sempre di utilizzare la versione stretch, lasciando però sempre un po' di margine ai lati.

Se stiamo lavorando con una risoluzione mille e quattrocento mille e quattro e quaranta, direi che è sessanta di margini possono essere più che sufficienti.

E poi appunto impostate quello che viene chiamato il cutter.

Questo è il primo modo di fare le griglie.

Vi faccio vedere cosa vuol dire che sia uno stretch.

Vuol dire che se adesso io riduco la tavola, come vedete le colonne si stanno riducendo di conseguenza.

Quindi com'è giusto che sia perché il nostro yacht deve essere il flessibile.

Rimetto la misura qui.

Ma come avete visto altre modalità di creare griglie? Per esempio un'altra è quella di creare rose.

Scusatemi delle righe, per esempio, mi può essere d'aiuto? Supponiamo che io voglio che la navigazione in alto sia sempre di ottanta pixel.

Invece di stare lì a mettere righelli nelle cose di questo tipo che milano fastidio creo una griglia solo con una riga orizzontale ancorata in alto come faccio? La cosa bella è che la posso aggiungere a questa che ho già creato, quindi vado qui sul più dico non griglia di otto pixel ma gli dico loro gli dico una adesso per comodità cambio colore in modo che noi possiamo vederla meglio.

Non gli dico stracciata ma le dico di essere ancorata in alto vedete che qui si inizia a vedere gli dico quante altre abbiamo detto tanta pixel.

Ecco qui che in questo modo ho creato un altro elemento di griglia all'interno del mio yacht altri elementi che mi possono aiutare.

Posso fare contro il gin ogni momento per andare a nascondere o visualizzare le mie le mie griglie.

Potrei fare la stessa cosa con una colonna a sinistra, quindi posso creare qui nelle out una nuova griglia gli dico colonne.

In questo caso mettiamola blu che si capisce un pochino meglio diro' sempre una colonna, gli dico che è ancorata a sinistra e gli do una dimensione questa volta mettiamo di tre centoventi immaginate quei classici esempi di dashboard dove abbiamo magari una cyber a sinistra e mi mi serve tenerla sempre fissa e magari una navigazione top sempre fissa di ottanta pixel.

Chiaramente in questo caso questa va un pochino a collidere con l'idea della griglia dodici, ma è solo per farvi vedere che abbiamo anche questa funzionalità.

La vado adesso a nascondere per non vederla, ma posso attivarlo in ogni momento.

La cosa buona è che se questo questa griglia io la vado a a salvare come una standardizzazione, me la ritroverò costantemente su tutto il mio all'interno del documento è mica male, perché vuol dire che ogni pagina nuova che creo ho già tutti questi riferimenti visivi progettati.

Come faccio a salvare questo asset di griglie messe insieme su fig? Ma vado su questi quattro puntini che è in qualche modo come dire la creazione di asset riutilizzabili all'interno del mio documento clicco sul più e gli vado a dire grigia backstop.

Ora questo è un elemento che chiamiamo standardizzato.

Vale a dire che se adesso io creo una nuova tavola di mille e quattro e quaranta per mille ventiquattro e voglio di nuovo utilizzare quel tipo di griglia.

Mi basta andare qui sullo yacht grid, sui quattro puntini e posso andare a riprendere la griglia di prima.

Non solo se mi rendo conto che qui voglio variare qualcosa, mi basterà andare su questo elemento, cliccare su questi concina che mi fa evitare e se per esempio supponiamo che io voglia cancellare la cyber di sinistra voglio aumentare per esempio l'lte zza della mia top bar.

Quando lo faccio chiaramente va a cascata questa modifica su tutti gli altri elementi.

Altra cosa importante.

Se invece non mi serve una serie di colonne di tuo bar ma io avevo solo magari due righe che mi fanno margine all'interno delle out e per esempio io questa tecnica uso sempre con il layout mobile dove preferisco lavorare con i margini che non con le colonne.

Allora possiamo utilizzare un altro trucco che figura ci mette a disposizione? Noi prendiamo in questo caso prendiamo una misura standard di the iphone, prendiamo l'undici pro x e vado a creare sempre una nuova grigia.

Non gli dico gli dico griglia ma gli dico colonne ne dico una metto un po' più scuro, metto accento così si vede un po' di più non gli dico non gli dico niente nello stretch lo lascio così.

Dico solo il margine.

Quanto margine voglio di questo layout mobile.

Beh, di base, se veramente vogliamo essere, come dire rispettosi delle linee guida, per esempio di Apple, dovrei mettere sedici Ok.

E gli dico che il Butter zero guardate qua.

Che cosa succede? Che questo diventano degli elementi di come come se fossero delle dei righelli delle guide non più delle colonne.

E ovviamente, avendo messo lo stretch sono fissi ogni volta che io al largo e chiudo la mia tavola, mi raccomando questo tenetelo sempre a mente progettare senza griglia e fare un po' harakiri.

Quindi questa è la prima base da cui cominciare quando iniziamo a lavorare con un file FIG.

Ma