Bene dopo aver imparato i CSS Grid Box Layout pssiamo giocare 🙂
Per alcuni dei livelli più interessanti provo a spiegarvi il metodo di ragionamento 😉
Livello 1
L’indice delle colonne parte da 1 non da 0.
Livello 3
Considerato che il padre abbia un dispaly:grid; vogliamo che il primo discendente del grid innaffi le carote, parte da 1 e termina 4(escluso), coprendo così tre carote.
Livello 4
I grid-column-start ed grid-column-end possono anche andare in ordine invertito, come nel livello 4.
Livello 5
I grid-column-start ed grid-column-end possono inoltre assumere valori negativi partendo a ritrovo dall’ultimo box, sapendo che il CSS Grid Box Container ha 5 discendenti per riga (lo so da grid-template-columns: 20% 20% 20% 20% 20%;) allora posso dire di terminare a -2.
Livello 7
Con la dicitura span sui figli possiamo dire quanti elementi congiungere. In questo esempio partendo dal grid-column-start: 2; indichiamo di congiungere 2 colonne con la proprietà: grid-column-end: span 2;.
Livello 9
Anche la dicitura span di congiunzione accetta di andare a ritroso.
Livello 10
Invece con l’operatore / sulla grid-column oppure grid-row possiamo indicare gli specifici range di start e di end.
Livello 11
L’operatore / può essere usato anche assieme allo span.
Livello 12 – Livello 13
Sono molto simili a quanto spiegato sopra però agiscono sulle righe piuttosto che sulle colonne.
Livello 14
Usiamo in maniera combinata grid-column e grid-row per posizionare il diserbante.
Livello 16
Si può utilizzare una scorciatoia per non specificare sempre grid-column e grid-row come in questo caso.
Livello 17
I grid possono essere a loro volta sovrapposti.
Livello 18
Un discendente di display:grid a sua volta può essere ordinato e posizionato sulla riga e/o colonna indipendentemente da dove esso si trovi.
Livello 20
Fino a livello 20 abbiamo operato sui CSS Flexbox Childs, ora da questo livello in poi troveremo problemi legati al CSS Flexbox Container.
Sapendo che il child da evidenziare deve essere una colonna di una riga dobbiamo dividere la griglia sulla colonna impostandola diversamente dalla griglia 5×5.
Infatti l’autore del gioco ci invita a sostituire grid-template-columns: 20% 20% 20% 20% 20%; con una regola ove la prima cella sia larga 50%.
Livello 21
Per indicare la ripetizione di celle di egual dimensione è possibile utilizzare il termine repeat, accettato sia grid-template-columns sia grid-template-rows.
Livello 23
Un altro termine molto utile nei CSS Grid Box Layout è fr, che indica una porzione di spazio disponibile regolangoli sullo spazio disponibile.
Livello 24
Come fr possono essere usati anche i px o gli em.
Livello 25 – Livello 26
I rispettivi livelli 25 e 26 non sono stati immediati però ricordatevi che px, fr e auto possono essere utili per queste combinazioni 🙂
Livello 27
Il livello 27 è facilissimo ci fa l’autore stesso l’esempio, però è utile per capire che con grid template possiamo utilizzare in maniera combinata <grid-template-rows> / <grid-template-columns>.
Livello 28
Eccoci giunti all’ultimo livello siete super pronti per affrontarlo da soli inoltre l’autore ci suggerisci di utilizzare la regola CSS grid che agisce in questo caso in maniera simile al precedente esempio.
Grazie per la lettura e buon Grid Box a voi 😉