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 – Livello 1

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 😉