Griglia di layout
mdui fornisce un sistema di layout a griglia a 12 colonne, reattivo e orientato ai dispositivi mobili.
Letture correlate
Contenitore del layout
mdui richiede l'inserimento di un contenitore .mdui-container per avvolgere il contenuto della pagina e il sistema di layout a griglia. Forniamo due classi a tale scopo.
La classe .mdui-container occupa dal 92% al 96% della larghezza dello schermo, con una larghezza massima di 1280px.
<body>
<div class="mdui-container">
...
</div>
</body>La classe .mdui-container-fluid occuperà sempre il 100% della larghezza dello schermo.
<body>
<div class="mdui-container-fluid">
...
</div>
</body>Griglia di base
.mdui-row deve essere contenuta in un .mdui-container o .mdui-container-fluid per conferirle il corretto allineamento (alignment) e riempimento (padding).
In .mdui-row sono incluse diverse classi .mdui-col-xs-[1-12], dove il numero in .mdui-col-xs-[1-12] indica quante colonne occupa l'elemento.
Se il totale delle colonne incluse in una riga è superiore a 12, le colonne in eccesso verranno disposte su una nuova riga.
<div class="mdui-row">
<div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>
Griglia reattiva
.mdui-col-xs-[1-12]Valido su tutti i dispositivi con schermo, come telefoni, computer, ecc..mdui-col-sm-[1-12]Valido su schermi piccoli e superiori, come i tablet..mdui-col-md-[1-12]Valido su schermi medi e superiori, come i laptop..mdui-col-lg-[1-12]Valido su schermi grandi e superiori, come i computer desktop..mdui-col-xl-[1-12]Valido su schermi extra-grandi, come televisori.
Combinando queste classi è possibile ottenere un effetto reattivo.
I breakpoint reattivi sono i seguenti:
| class | Intervallo | Larghezza del gutter |
|---|---|---|
.mdui-col-xs-[1-12] | > 0px | 16px (8px a sinistra e a destra di ogni colonna) |
.mdui-col-sm-[1-12] | > 600px | |
.mdui-col-md-[1-12] | > 1024px | |
.mdui-col-lg-[1-12] | > 1440px | |
.mdui-col-xl-[1-12] | > 1920px |
<!-- Sui dispositivi con schermo ultra-piccolo, la prima colonna ha una larghezza del 100% e la seconda del 50%. Sui dispositivi con schermo piccolo e superiori, la prima colonna ha una larghezza del 66,6% e la seconda del 33,3%. -->
<div class="mdui-row">
<div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- Sui dispositivi con schermo ultra-piccolo ogni colonna ha una larghezza del 50%, sui dispositivi con schermo piccolo e superiori ogni colonna ha una larghezza del 33,3%. -->
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- Su tutti i dispositivi, ogni colonna ha una larghezza del 50%. -->
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>Spaziatura tra le colonne (Gutter)
Per impostazione predefinita è presente una spaziatura di 16px tra le colonne; basta aggiungere la classe .mdui-row-gapless alla .mdui-row per eliminare la spaziatura.
<div class="mdui-row mdui-row-gapless">
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>Offset delle colonne
Utilizzando .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] e .mdui-col-offset-xl-[1-12] è possibile spostare le colonne verso destra; il numero nel nome della classe indica di quante colonne spostarsi a destra.
<div class="mdui-row">
<div class="mdui-col-md-4">.mdui-col-md-4</div>
<div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>Colonne annidate
L'annidamento delle colonne si ottiene aggiungendo nuovi elementi .mdui-row e .mdui-col-[*] all'interno di colonne esistenti. Le colonne contenute in una riga annidata non possono superare le 12.
<div class="mdui-row">
<div class="mdui-col-xs-9">
Level 1: .col-xs-9
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
<div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>Colonne con divisione uguale
In .mdui-row-xs-[1-12] sono contenuti diversi elementi con la classe .mdui-col; questi elementi verranno divisi equamente. Ad esempio: ogni elemento .mdui-col in .mdui-row-xs-5 occupa il 20% della larghezza.
<div class="mdui-row-xs-5">
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
</div>Combinando .mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12], .mdui-row-xl-[1-12] è possibile realizzare un layout reattivo.
Elenco classi CSS
| Nome classe | Descrizione |
|---|---|
.mdui-container | Contenitore del layout con limite di larghezza |
.mdui-container-fluid | Contenitore del layout a larghezza 100% |
.mdui-row | Definisce una riga |
.mdui-col-[xs|sm|md|lg|xl]-[1-12] | Definisce una colonna |
.mdui-row-gapless | Elimina la spaziatura tra le colonne |
.mdui-col-offset-[xs|sm|md|lg|xl]-[1-12] | Offset delle colonne |
.mdui-row-[xs|sm|md|lg|xl]-[1-12] | Colonne con divisione uguale |