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
CSS Grid Box Garden – Livello 1
L’indice delle colonne parte da 1 non da 0.
Soluzione CSS Grid Box Garden Livello 1
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.
Soluzione livello 3 CSS Grid Box Garden
Livello 4
I grid-column-start ed grid-column-end possono anche andare in ordine invertito, come nel livello 4.
Soluzione livello 4 CSS Grid Box Garden
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.
Soluzione CSS Grid Box Garden Livello 5
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;.
Soluzione Livello 7 CSS Grid Box Garden
Livello 9
Anche la dicitura span di congiunzione accetta di andare a ritroso.
Soluzione Livello 9 – CSS Grid Box Garden
Livello 10
Invece con l’operatore / sulla grid-column oppure grid-row possiamo indicare gli specifici range di start e di end.
Soluzione Livello 10 – CSS Grid Box Garden
Livello 11
L’operatore / può essere usato anche assieme allo span.
Soluzione Livello 11 – CSS Grid Box Garden
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.
Soluzione Livello 14 – CSS Grid Box Garden
Livello 16
Si può utilizzare una scorciatoia per non specificare sempre grid-column e grid-row come in questo caso.
CSS Grid Box Garden – Livello 16
Livello 17
I grid possono essere a loro volta sovrapposti.
CSS Grid Box Garden – Livello 17
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.
CSS Grid Box Garden – Livello 18
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%.
CSS Grid Box Garden – Livello 20
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.
CSS Grid Box Garden – Livello 21
Livello 23
Un altro termine molto utile nei CSS Grid Box Layout è fr, che indica una porzione di spazio disponibile regolangoli sullo spazio disponibile.
CSS Grid Box Garden – Livello 23
Livello 24
Come fr possono essere usati anche i px o gli em.
Livello 24 – CSS Grid Box Garden
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 🙂
CSS Grid Box Garden – Livello 25
CSS Grid Box Garden – Livello 26
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>.
CSS Grid Box Garden – Livello 27
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.
CSS Grid Box Garden – Livello 28
Grazie per la lettura e buon Grid Box a voi 😉
