Layout

In questa pagina verrà descritto, tra le altre cose, come impostare un layout sia con flex che con CSS grid. In ogni caso i layout saranno sempre Mobile First

Width Utility Classes

Abbiamo diverse utility classes per impostare la larghezza degli elementi di una pagina.

Auto width

Con .w-auto fai calcolare automaticamente al browser la larghezza dell'elemento

.w-auto


                        <div class="bg-primary-300 py-2 px-4 w-auto"></div>

Screen width

Con .w-screen l'elemento avrà la stessa larghezza del viewport.

.w-screen


                        <div class="bg-primary-300 py-2 px-4 w-screen"></div>

Fixed width

Con .w-{numero} o .w-px si imposta la larghezza di un elemento secondo parametri fissi (.w-0 larghezza= 0, .w-px larghezza= 1px, .w-1 larghezza= .25rem, .w-2 larghezza= .5rem, ecc)

.w-px

.w-1

.w-2

.w-3

.w-4

.w-5

.w-6

.w-8

.w-10


                        <div class="w-px"></div>

Fluid Width. Layout fluido con flex e frazioni

Con .w-{frazione} l'elemento avrà una larghezza calcolata in percentuale. Per avere il controllo della larghezza a seconda del viewport, bisogna aggiungere alla classe di base (es. .w-full) un'altra classe preceduta dal prefisso .{breakpoint}:. ad esempio, un elemento con le classi .w-full .sm:1/2 avrà di base una larghezza full e dalle risoluzioni small in su avrà un'ampiezza di 1/2

.w-1/2

.w-1/3

.w-2/3

.w-1/4

.w-3/4


                        <div class="flex-none sm:flex mb-4">

                               <div class="bg-primary-200 py-2 px-4 w-full sm:w-1/2">

                                  ...

                               </div>

                               <div class="bg-primary-400 py-2 px-4 w-full sm:w-1/2">

                                  ...

                               </div>

                        </div>

Grid Layout

E' possibile organizzare col minimo sforzo un layout completamente responsive usando le grid utility classes. Si può impostare una griglia per un massimo di 12 celle della stessa ampiezza per riga. Di seguito l'elenco delle grid utility classes.

.grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));

.grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));

.grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));

.grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));

.grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));

.grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));

.grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));

.grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));

.grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));

.grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));

.grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));

.grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));

.grid-cols-auto grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

.grid-cols-none grid-template-columns: none;

Esempio griglia basic

Ad esempio, se il div contenitore ha le due grid utility classes .grid .grid-cols-4, avremo al suo interno una griglia di 4 celle della stessa ampiezza per ogni riga. la classe .gap-{numero} imposta lo spazio verticale e orizzontale tra ogni cella.


                        <div class="grid grid-cols-4 gap-4">

                              <div class="..."></div>

                              <div class="..."></div>

                        </div>

Responsive grid

seguendo sempre la logica *mobile first*, posso impostare la griglia in modo che si adatti a seconda del viewport. alla classe generale (in questo caso .grid-cols-none), aggiungo delle classi che iniziano con il prefisso breakpoint .{breakpoint}: (in questo caso md:grid-cols-2 e lg:grid-cols-4).
Nell'esempio avremo una griglia che dalle risoluzioni large in su avrà quattro celle per riga, da quelle medium in su ne avrà due per riga, e negli altri casi ogni cella occuperà tutta la larghezza del contenitore


                        <div class="grid grid-cols-none md:grid-cols-2 lg:grid-cols-4 gap-4">

                              <div class="..."></div>

                              <div class="..."></div>

                        </div>

Grid Auto Columns

Con .{breakpoint}: (in questo caso grid-cols-auto si risolve la questione breakpoint alla radice: viene generata una griglia che si adatta automaticamente al viewport o al contenitore senza bisogno di breakpoint.


                        <div class="grid grid-cols-auto">

                              <div class="..."></div>

                              <div class="..."></div>

                        </div>

Grid Layout Start/End

E' possibile organizzare la griglia in modo che le celle non siano per forza tutte della stessa larghezza. attraverso queste classi, che saranno associate alle celle, si potrà controllare il modo in cui i singoli elementi saranno posizionati all'interno della griglia attraverso span, offset, ecc

.col-auto grid-column: auto;

.col-span-1 grid-column: span 1 / span 1;

.col-span-2 grid-column: span 2 / span 2;

.col-span-3 grid-column: span 3 / span 3;

.col-span-4 grid-column: span 4 / span 4;

.col-span-5 grid-column: span 5 / span 5;

.col-span-6 grid-column: span 6 / span 6;

.col-span-7 grid-column: span 7 / span 7;

.col-span-8 grid-column: span 8 / span 8;

.col-span-9 grid-column: span 9 / span 9;

.col-span-10 grid-column: span 10 / span 10;

.col-span-11 grid-column: span 11 / span 11;

.col-span-12 grid-column: span 12 / span 12;

.col-span-full grid-column: 1 / -1;

.col-start-1 grid-column-start: 1;

.col-start-2 grid-column-start: 2;

.col-start-3 grid-column-start: 3;

.col-start-4 grid-column-start: 4;

.col-start-5 grid-column-start: 5;

.col-start-6 grid-column-start: 6;

.col-start-7 grid-column-start: 7;

.col-start-8 grid-column-start: 8;

.col-start-9 grid-column-start: 9;

.col-start-10 grid-column-start: 10;

.col-start-11 grid-column-start: 11;

.col-start-12 grid-column-start: 12;

.col-start-13 grid-column-start: 13;

.col-end-auto grid-column-end: auto;

.col-end-1 grid-column-end: 1;

.col-end-2 grid-column-end: 2;

.col-end-3 grid-column-end: 3;

.col-end-4 grid-column-end: 4;

.col-end-5 grid-column-end: 5;

.col-end-6 grid-column-end: 6;

.col-end-7 grid-column-end: 7;

.col-end-8 grid-column-end: 8;

.col-end-9 grid-column-end: 9;

.col-end-10 grid-column-end: 10;

.col-end-11 grid-column-end: 11;

.col-end-12 grid-column-end: 12;

.col-end-13 grid-column-end: 13;

.col-end-auto grid-column-end: auto;

Esempio col span


                        <div class="grid grid-cols-none lg:grid-cols-4 md:grid-cols-2 gap-4">

                              <div class="col-span-2 bg-primary-200 h-8"></div>

                              <div class="bg-primary-300 h-8"></div>

                              <div class="bg-primary-200 h-8"></div>

                              <div class="col-span-3 bg-primary-300 h-8"></div>

                              <div class="bg-primary-300 h-8"></div>

                              <div class="bg-primary-200 h-8"></div>

                              <div class="bg-primary-200 h-8"></div>

                              <div class="col-span-2 bg-primary-300 h-8"></div>

                        </div>

Esempio col start

In questo caso la prima cella della griglia ha un .col-start-3, che vuol dire che ha un offset pari allo spazio di due celle


                        <div class="grid grid-cols-none lg:grid-cols-4 md:grid-cols-2 gap-4">

                              <div class="col-start-3 bg-primary-200 h-8"></div>

                              <div class="bg-primary-300 h-8"></div>

                              <div class="bg-primary-200 h-8"></div>

                              <div class="col-span-3 bg-primary-300 h-8"></div>

                              <div class="bg-primary-300 h-8"></div>

                              <div class="bg-primary-200 h-8"></div>

                              <div class="bg-primary-200 h-8"></div>

                              <div class="bg-primary-200 h-8"></div>

                        </div>