CSS Grid Box Garden

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 Issue

CSS Grid Box Garden – Livello 1


L’indice delle colonne parte da 1 non da 0.
CSS Grid Box Garden Level 1 Solve

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.

Level 3 Solve

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.

Solve level 4 CSS Grid Box Garden

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.

CSS Grid Box Garden Level 5

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;.

Level 7 Solve CSS Grid Box Garden

Soluzione Livello 7 CSS Grid Box Garden

Livello 9

Anche la dicitura span di congiunzione accetta di andare a ritroso.

CSS Grid Box Garden Solve Level 9

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.

CSS Grid Box Garden Level 11

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.

CSS Grid Box Garden Level 14

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.

Soluzione Livello 16 CSS Grid Box Garden

CSS Grid Box Garden – Livello 16

Livello 17

I grid possono essere a loro volta sovrapposti.

Soluzione Livello 17

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.

Soluzione Livello 18 CSS Grid Box Garden

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%.

Solve Level 20 CSS Grid Box Garden

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.

Solve Level 21 CSS Grid Box Garden

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.

Soluzione Livello 23 CSS Grid Box Garden

CSS Grid Box Garden – Livello 23

Livello 24

Come fr possono essere usati anche i px o gli em.

Level 24 Solve CSS Grid Box Garden

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 🙂

Soluzione Livello 25 CSS Grid Box Garden

CSS Grid Box Garden – Livello 25

Soluzione Livello 26 CSS Grid Box Garden

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 Soluzione Livello 27

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.

Solve Level 28 CSS Grid Box Garden

CSS Grid Box Garden – Livello 28

Grazie per la lettura e buon Grid Box a voi 😉

CSS Grid Box Garden ultima modidfica: 2018-01-31T22:11:49+01:00 da Gianluca Di Vincenzo