Possibilità infinite di impaginazione
Premesso che abbiate bisogno di qualcosa di più sofisticato del CSS Grid Layout Module standard, questo nostro sistema di griglia dinamica e responsiva è davvero semplice da utilizzare e consente di realizzare facilmente qualsiasi layout a griglia con certezza matematica di riuscita. Consente inoltre di non dipendere da una struttura rigida righe/colonne, in cui ciascuna riga viene suddivisa in un certo numero di colonne. Invece permette degli "incastri" particolari per realizzare davvero delle configurazioni uniche e personalizzate.
Le dimensioni e il posizionamento dei vari box vengono controllati in percentuale, mentre le spaziature interne ed esterne dei box possono essere impostate con varie unità di misura (px, %, em), l'importante è tenerne conto nei calcoli delle dimensioni. Noi le abbiamo impostate in px. Per le operazioni di calcolo viene usata la funzione CSS calc(), comodissima per determinare gli esatti valori di cui si ha bisogno, ad esempio sottraendo dall'altezza in percentuale del box i pixel destinati ai margini e padding: height: calc(100% - 40px); ricordate di lasciare sempre uno spazio tra i valori numerici e l'operatore, in questo caso il segno "meno".
La disposizione dei box viene configurata nel file HTML e nel file CSS: è importante ricordare che la sequenza di box del file HTML è quella che comparirà nella versione mobile, mentre nella versione desktop i box possono anche essere collocati in un ordine diverso, se questo serve allo scopo. La versione desktop è totalmente personalizzabile. Nell'esempio abbiamo fornito 6 box di dimensione variabile sia in larghezza sia in altezza, per far comprendere il codice.
Se il contenuto dei box per qualche motivo è troppo lungo e non riesce ad essere visualizzato integralmente nell'area a disposizione la parte in eccesso viene automaticamente nascosta con overflow: hidden, ciò solamente nella versione desktop.
Infatti il layout a griglia impaginata che visualizzate nella versione desktop viene poi sostituito su mobile da una sequenza ordinata di box che si dispongono, a tutta larghezza, uno sotto l'altro, mostrando il contenuto completo del box. Il tutto viene naturalmente gestito dalle media queries, con il punto di switch personalizzabile (ora è impostato a 800px).
I colori dei "bordi" dei box, con varie gradazioni di grigio, sono puramente indicativi e servono per identificare i box stessi (in realtà sono i colori di sfondo dei box e sono impostati direttamente nel file html, ad esempio per il primo box background:#111). Saranno poi sostituiti presumibilmente da un colore unico, salvo esigenze particolari. Sarà inoltre possibile eliminarli del tutto azzerando i margin del box interno (classe .inner_box) ovvero quello che ospita i contenuti effettivi del box.
