Layout a griglia con inuit.css

Iniziamo questa carrellata di esempi di layout realizzati con inuit.css con la prima demo.

Abbiamo racchiuso la griglia in un contenitore, il div#container:

<div id="container">
[...]
</div>

Nel CSS assegniamo ad esso questa regola fondamentale:

#container {
 width: 100%;
 max-width: 1040px;
 margin: 0 auto;
 padding: 15px;
}

Limitiamo la larghezza massima a 1040px, centriamo con margin: auto, diamo un po' di padding.

Il layout ha sei blocchi orizzontali (righe), quindi abbiamo sei div con classe .gc.

In ciascuno inseriamo gli elementi della griglia.

Vogliamo che il primo si estenda per l'intera larghezza della riga, 100%, dunque:

<div class="grid  span-1">
[...]
</div>

Nella seconda riga vogliamo tre blocchi uguali, ciascuno pari a 1/3 (33.333%) della larghezza:

<div class="gc">
 <div class="grid  span-1-3">
 [...]
 </div>
 <div class="grid  span-1-3">
 [...]
 </div>
 <div class="grid  span-1-3">
 [...]
 </div>
</div>

Nella riga successiva vogliamo sempre tre blocchi, ma con proporzioni diverse, diciamo 25% - 25% - 50%. Mettiamo mano al foglio di stile e verifichiamo a quali classi corrispondono queste proporzioni. Ecco:

<div class="gc">
 <div class="grid  span-1-4">
  [...]
 </div>
 <div class="grid  span-1-4">
  [...]
 </div>
 <div class="grid  span-1-2">
  [...]
 </div>
</div>

E così via, il meccanismo dovrebbe risultare molto intuitivo.

Prendete allora la seconda demo. Occhio alla terza riga. Vogliamo queste proporzioni per i tre elementi: 10% - 30% - 60%. Le classi? Ricorriamo alle frazioni in decimi: 1/10, 3/10, 6/10. Ecco il markup:

<div class="gc">
 <div class="grid  span-1-10">
  [...]
 </div>
 <div class="grid  span-3-10">
  [...]
 </div>
 <div class="grid  span-6-10">
  [...]
 </div>
</div>

Griglie annidate

Creare griglie annidate è molto facile, basta fare attenzione a strutturare il markup. Nella terza demo vogliamo suddividere in tre blocchi uguali di 1/3 l'elemento della griglia di 6/10 che abbiamo appena creato:

<div class="grid  span-6-10">
 <div class="gc">
   <div class="grid  span-1-3">
   [...]
   </div>
   <div class="grid  span-1-3">
   [...]
   </div>
   <div class="grid  span-1-3">
   [...]
   </div>
 </div>
</div>

Invertire l'ordine degli elementi della griglia

Nella quarta demo possiamo vedere in azione un'altra comoda funzionalità. Riprendiamo un attimo il blocco su cui stiamo lavorando:

<div class="gc">
 <div class="grid  span-1-10">
  [...]
 </div>
 <div class="grid  span-3-10">
  [...]
 </div>
 <div class="grid  span-6-10">
  [...]
 </div>
</div>

L'ordine, nel codice, è: elemento di 1/10, elemento di 3/10, elemento di 6/10. E così lo abbiamo visto nella seconda demo.

Se vogliamo invertire l'ordine di presentazione lasciando immutato l'ordine nel sorgente, basterà assegnare al div che contiene gli elementi, oltre alla classe .gc, anche la classe .gc--rev:

<div class="gc gc--rev">
 <div class="grid  span-1-10">
  [...]
 </div>
 <div class="grid  span-3-10">
  [...]
 </div>
 <div class="grid  span-6-10">
  [...]
 </div>
</div>

L'ordine di visualizzazione è ora, come si vede, elemento di 6/10, elemento di 3/10, elemento di 1/10.

Bene così, come panoramica generale può bastare. Possiamo ora parlare delle funzionalità responsive di inuit.css. Lo faremo nella prossima lezione.