buongiorno a tutti bentornati episodio numero 21 di css oggi parliamo del grid layout abbiamo un po di cose da vedere cos'è il grid layout definire una grid andiamo a derry grid flessibili andiamo metterlo spazio tra cellere pitt la funzione minimax vediamo una piccola funzione che ci permette di mettere tante colonne quante ce ne stanno e come posizionare gli elementi nella grid allora cominciamo subito dal modello di grid ok allunghiamo questa immagine zoomiamo la un po allora diciamo che una pagina può essere divisa in dodici colonne ok molto utile perché ci permette di creare o dodici
colonne separate oppure dividendole per 23 46 capite che possiamo avere tre colonne tre macro clone da quattro colonne e 4 da tre 2 da 6 6 da due e via discorrendo quindi queste sulle colonne questo in orizzontale ovviamente sulle rose abbiamo il gutter tra l'eroe il gutter tra le colonne gutter altro non è che il gap quindi la distanza tra una cosa e l'altra ok quindi una pagina si divide idealmente in colonne tramite il grid layout e potrebbe essere un'unica grande rock e occupa dodici colonne qua per la nav bar poi abbiamo qua al main
e che occupa 8 poi abbiamo la side che occupa 4 e il footer sotto che occupa 12 quindi capite che è abbastanza intuitiva come cosa semplicemente dobbiamo capire come farlo come mettere il come cominciare ad avere un grid layout io qua ho messo un container di container con sette box ho messo dentro del contenuto se no non ci sto una niente possiamo togliere questo ci basta mettere display grid e il nostro contenere appunto diventa una grid come possiamo fare per rendere la nostra grid un po più complessa ok possiamo andare a creare delle colonne quindi
andando no ea mettere a mano la larghezza delle colonne io potrei fare 100 pixel cento pixel e 100 pixel qi qi uscirebbero tre colonne da 100 pixel ciascuna effettivamente sono tre colonne da 100 pixel ciascuna se vogliamo strafare possiamo fare 500 200 e 500 e vedete come molto semplice gestirle diciamo che così però la dimensione fissa perciò utilizziamo fr comunità di misura flessibile andiamo a vedere ok è così occupano tutta la pagina perfetto direi abbastanza intuitivo se vogliamo andare a creare colonne di diversa larghezza ci basta fare una cosa del genere 2 fr1 ferra abbiamo
due colonne una occupa due terzi un occupa un terzo ecco qua ora che cos'è questo gap che vedete se gap non ci fosse avremmo un mischione del genere gap ci permette di settare il gutter sia sulle rocche sulle colonne vedete questo bello spazietto dc pixel tra ogni cella sia in orizzontale che in verticale per semplificarci la vita per semplificarci la vita noi potremmo fare una cosa del genere potremmo fare repeat mettiamo caso che abbiamo tutte colonne uguali ok potremmo farli repeat tre volte una cella così scrivere questo è esattamente come scrivere così identico quindi adesso
vi faccio vedere vedete che è identico sputato rick rifacciamo mi prendi una colonna da un fr anziché scriverla tre volte mela ripeti 3 volte quindi repeat quante volte virgola larghezza della colonna punto andiamo vedere invece la funzione in min max ok funzione min max la usiamo per repeat si desume che noi vogliamo avere tre colonne della stessa dimensione dobbiamo fare minimax apriamo e mettiamo il minimo valore 200 pixel il massimo valore auto ok andiamo a far così come vedete la larghezza qua è automatica e flessibile ma arrivati a 200 pixel non si rimpiccioliscono più non
si sentano più restano così quindi non diventano più flessibili oltre questo oltre 200 pixel ok quindi ho reso l'idea di mini max abbiamo la larghezza minima che 200 per mano della ragazza massima che è automatica di conseguenza oltre 200 è automatico e segue la larghezza del dew port importante sapere che per ora abbiamo semplicemente lavorato con tre righe ma abbiamo lavorato con un numero di righe implicito ok noi non abbiamo mai definito le righe quindi se io andassi a fare così un fr e un fr ben due colonne ma abbiamo sette elementi quindi abbiamo quattro
righe se io vado a fare tre fr abbiamo tre righe quindi non stiamo definendo le righe stiamo semplicemente definendo le numero di colonne e il numero di righe è implicito quindi è automatico allora grid template rose ci permette di modificare nello stesso modo il vero quindi non potremmo fare abbiamo tre o quattro oro che siano diciamo 200 pixel facciamo cento pixel facciamo 500 pixel ok quindi vedete abbiamo tre colonne avendo tre colonne abbiamo settato tre valori differenti va bene se non vogliamo andare a sistemare in modo così a ma non possiamo fare grid auto rose
vedete qua e mettiamo un valore unitario per tutte in questo caso facciamo 200 pixel vedete che sarà sempre di 200 pixel nel caso in cui il nostro il conte nel caso in cui il nostro contenuto e celle 200 pixel qi basta fare auto in questo caso vedete che esce rinca semplicemente perché il nostro contenute letteralmente 1234 ok quindi però gestendo così abbiamo tutto in maniera flessibile e dinamica molto molto comodo ora vediamo come fare l'auto film ovvero quante facciamo stare tante colonne quant'è la larghezza del del nostro viewport alloggiamo repeat diciamo repeat facciamo autofill ovvero
stiamo dicendo riempito automaticamente ok anziché mettere tre e c'è anziché mettere una colonna 3 repeat tre volte facciamo ripeti per quante volte riesce a farlo e mettiamo min max mettiamo un minimo di 100 pixel e un massimo automatico teniamo del risultato vedete forse meno se gli diamo un po di gli diamo 200 pixel giusto per dargli un po di ok così si vede meglio dunque che cosa sta succedendo allora tenete conto che tenete conto che non abbiamo più di questi box quindi questi sono i massimi box che ci stanno ma partiamo da qui ok qua
riempie tutto quindi abbiamo sette box e qua ci sta perché abbiamo detto che il massimo è automatico ok mentre invece il minimo e 100 quindi vedete che da qua comincia automaticamente ad auto filare le righe quindi qua con 200 pixel se noi abbiamo 400 guardate qua in alto o che avrete quindi 300 pixel più il gap quindi quando riesce più a gestirle le manda sotto voglio far vedere il placement delle delle celle basato sulla sulla linea si chiama line based placement in questo caso noi abbiamo il nostro layout ok poniamo il caso che abbiamo quattro
box questo è più un esempio pratico di come potreste impostare il vostro layout abbiamo quattro perché non me la giornata perché non ho salvato noi abbiamo quattro giusto e facciamo quanto segue abbiamo tre non abbiamo tre colonne che abbiamo tre colonne l'altezza per ora qua e 200 e ci va bene allora quello che voglio fare è prendere questa il box 1 e fare grid colum da uno a quattro perché in questo caso 4 el'inizio della della cella che non c'è vedete se faccio tre ne avevamo già parlato e se faccio tre arriva qua perché questa
inizio della terza quindi si ferma all'inizio del numero che mettiamo se ci mettiamo 4 finisce la terza cella ok e questo sarebbe tipo il nostro il nostro eder per intenderci la nostra nave possiamo mettere un banner o cose leggere poi abbiamo qui il nostro secondo box che vogliamo farla meno area viene di conseguenza grid colon possiamo fare 13 il secondo qua ci va bene e possiamo fare che il quarto box invece a una grade colum e lo facciamo 14 vedete che fondamentalmente abbiamo un template flessibile che è quasi simile a un un template vero e
proprio in realtà potremmo far così ne potremmo andare su container e mettere auto in modo che viene automaticamente gestito e in base al contenuto però in questo caso le rimetto 200 mettendo auto in base al contenuto se ne abbiamo una nave che alta letteralmente cento pixel andrà a occupare solo 100 pixel mentre invece qua sul 2 dove abbiamo gli articoli qua che abbiamo la sidebar con van t link andrà avanti all'infinito quindi questo è un esempio di questo è letteralmente un esempio di template vado a lavorare un attimo su questa cosa qua per farvi vedere
un idea di come potrebbe essere più avanti col contenuto facciamo creed template e facciamo che la nave e 50 pixel ok un menù piccolino facciamo che il centro è 900 pixel e poi facciamo che il footer sono 400 pixel perché sono un po di informazioni anzi facciamo che quali diciamo un pochino 400 no scherzo diciamo 500 equa facciamo 200 ok come potete vedere abbiamo una sorta di pagina mi ha letteralmente una barriera che aveva un nostro menù come abbiamo gli articoli come abbiamo la sidebar e qua abbiamo il nostro footer semplicemente con quattro box e
una grade aggiorniamo ok abbiamo i nostri elementi qua come possiamo piazzare gli elementi all'interno è è molto semplice è molto semplice ci basta andare qui e inserire ciò che ci serve quindi box un abbiamo detto che è nav quindi potremmo fare ok teniamo box mettiamo quan avv qua invece lo chiamiamo main quello che amiamo side e questo lo chiamiamo footer va bene allora nel main facciamo così abbiamo un po di roba che ho copiato in automatico mettiamo un h1 prendiamo mai artico facciamo così ok qua mettiamo p diciamo p perfetto chiudiamo qua poi nel side
andiamo a mettere altro contenuto e possiamo fare semplicemente così scriviamo sidebar facciamo un p ci mettiamo dentro il contenuto randomico perfetto ok e poi semplicente quale il footer mettiamo contatti e scriviamo qwerty gmail punto poi ok non voglio che sia un account vero per quanto riguarda invece la nave lasciamo per ora uno non facciamo un menù va bene così allora attualmente ci compare questa cosa qua quindi prendiamo il line placement che abbiamo visto prima prendiamo il line placement e ne facciamo effettivamente un template allora nav abbiamo detto che gridi gollum e facciamo 14 ok già
buono andiamo su main verità potremmo fare le classi qua dentro sedicente voglio farvelo vedere subito velocemente facciamo grid colum grid column facciamo 13 sidebar è automatica dopodiché andiamo su footer facciamo grid colum 14 poi andiamo quassù container l'eroe le mettiamo come auto volete la differenza e poi potremo andare quassù box potremo mettere un pad ying diventi pixel vede come automaticamente aumenta sia la sidebar che l'articolo lo faccio vedere ancora già magari 40 pixel molto bello per quanto invece riguarda la side andiamo qua e mettiamo anche qua 40 e mandiamo poi sul footer mettiamo un pad
ding diventi pixel e la nave facciamo finta che la nar ci sia qualcosa di più di così facciamo un pub in diventi pixel perfetto noi potremmo letteralmente copiare questa cosa all'infinito anzi facciamolo subito facciamo ispeziona andiamo qua questo articolo editcom html lo ripetiamo una vagonata di volte anzi diciamo così copiamo bac bac bac bac salviamo ok vedete che automaticamente la nostra rho la nostra road della grid si è impostata automaticamente per contenere il mio articolo questa è la sidebar che giustamente siano sulla stessa rho aumenta e poi abbiamo la nostra nave e il nostro footer
quindi questo è un esempio di and positioning come line bass placement come abbiamo visto prima sufficiente adesso gli abbia messo il contenuto altrimenti c'è un modo per farlo con le green template áreas consiste non ve lo faccio vedere persone intero nel mio preferito è secondo me non lo so non si capisce neanche tanto bene consiste nel fare delle aree a cui diamo dei nomi ok che poi andremo a riprendere in ogni elemento provatelo io però per questo corso preferisco saltar velo non so se va bene per dei principianti onestamente credo che gridi come abbiamo fatto
così vanno più che bene potete fare tanti bellissimi template anche se io preferisco usare flex box è il motivo per cui non ve lo spiego a preferisco usare flex ebi abbiamo trovato line bass placement quindi direi che per questo video è veramente tutto io mi sono dilungato un pochino però c'era un po di cui parlare spero che il green template sia il gri template sia stato capito ho creato una community su telegram un gruppo dove potete parlare c'è anche il canale per restare sempre informati sui video e su altri progetti che vorrà portare avanti extra
canale youtube cosa dire se volete fare il vostro template e farlo vedere sul fronte alle altre persone sul gruppo ben venga se invece avete l'abbonamento al canale mi volete scrivere in privato e mandarlo da vedere potete farlo senza problemi dicevo io vi ringrazio nella prossima ciao ciao
