W3.CSS Responsive Fluid Grid
Griglia reattiva
W3.CSS supporta una griglia fluida reattiva a 12 colonne.
Ridimensiona la pagina per vedere l'effetto!
Questa parte occuperà 12 colonne su uno schermo piccolo, 4 su uno schermo medio e 3 su uno schermo grande.
Questa parte occuperà 12 colonne su uno schermo piccolo, 8 su uno schermo medio e 9 su uno schermo grande.
Esempio
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div>
Righe reattive
Il sistema di griglia di W3.CSS è reattivo. Le colonne si riorganizzeranno automaticamente in base alle dimensioni dello schermo: su uno schermo grande potrebbe avere un aspetto migliore con il contenuto organizzato in tre colonne, ma su uno schermo piccolo potrebbe essere meglio se i contenuti fossero impilati uno sopra l'altro.
| Classe | Descrizione |
|---|---|
| w3-riga | Contenitore per classi reattive, senza riempimento |
| w3-riga-imbottitura | Contenitore per classi reattive, con riempimento sinistro e destro di 8px |
| w3-col | Definisce una colonna in una griglia reattiva a 12 colonne |
w3-col ha le seguenti sottoclassi:
Colonne per schermi piccoli (tipici smartphone):
| Classe | Descrizione |
|---|---|
| s1 | Definisce 1 colonna su 12 (larghezza: 08,33%) per schermi piccoli |
| s2 | Definisce 2 colonne su 12 (larghezza: 16,66%) per schermi piccoli |
| s3 | Definisce 3 di 12 colonne (larghezza: 25,00%) per schermi piccoli |
| s4 | Definisce 4 colonne su 12 (larghezza: 33,33%) per schermi piccoli |
| s5-s11 | |
| s12 | Definisce 12 di 12 colonne (larghezza: 100%). Predefinito per schermi piccoli |
Colonne per schermi medi (compresse tipiche):
| Classe | Descrizione |
|---|---|
| m1 | Definisce 1 colonna su 12 (larghezza: 08,33%) per schermi medi |
| m2 | Definisce 2 colonne su 12 (larghezza: 16,66%) per schermi medi |
| m3 | Definisce 3 di 12 colonne (larghezza: 25,00%) per schermi medi |
| m4 | Definisce 4 di 12 colonne (larghezza: 33,33%) per schermi medi |
| m5-m11 | |
| m12 | Definisce 12 di 12 colonne (larghezza: 100%). Predefinito per schermi medi |
Colonne per schermi di grandi dimensioni (tipici laptop e desktop):
| Classe | Descrizione |
|---|---|
| l1 | Definisce 1 colonna su 12 (larghezza: 08,33%) per schermi di grandi dimensioni |
| l2 | Definisce 2 colonne su 12 (larghezza: 16,66%) per schermi di grandi dimensioni |
| l3 | Definisce 3 di 12 colonne (larghezza: 25,00%) per schermi di grandi dimensioni |
| l4 | Definisce 4 colonne su 12 (larghezza: 33,33%) per schermi di grandi dimensioni |
| l5-l11 | |
| l12 | Definisce 12 di 12 colonne (larghezza: 100%). Predefinito per schermi grandi) |
Le classi di cui sopra possono essere combinate per creare layout più dinamici e flessibili.
Ogni classe aumenta, quindi se desideri impostare la stessa larghezza per schermi piccoli, medi e grandi, devi solo specificare la classe piccola . E se vuoi la stessa larghezza su schermi medi e grandi, devi solo specificare la classe media.
Tuttavia, se utilizzi solo classi medie e/o grandi, la larghezza si trasformerà sempre al 100% su schermi piccoli.
Nota: il numero di colonne deve sempre essere 12 per ogni riga (6+6, 3+3+6, 9+3, ecc.)!
Due colonne uguali
Due colonne di uguale larghezza (50%/50%) su tutte le dimensioni dello schermo:
s6
s6
Esempio
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
Due colonne disuguali
Due colonne di larghezza diversa (25%/75%) su tutte le dimensioni dello schermo:
s3
s9
Esempio
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
Tre colonne uguali
Tre colonne di uguale larghezza (33,3%/33,3%/33,3%) su tutte le dimensioni dello schermo:
s4
s4
s4
Esempio
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div>
Tre colonne disuguali
Tre colonne di larghezza diversa (25%/50%/25%) su tablet, laptop e desktop. Sui telefoni cellulari, le colonne si accumuleranno automaticamente (100% di larghezza):
m3
m6
m3
Esempio
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div>
Nota: questo esempio è lo stesso dell'utilizzo di w3-quarto (m3), w3-metà (m6), w3-quarto (m3), che hai imparato nel capitolo W3.CSS Responsive .
Sei colonne
Sei colonne di uguale larghezza (16% ciascuna) su tablet, laptop e desktop. Sui telefoni cellulari, le colonne si accumuleranno automaticamente (100% di larghezza):
m2
m2
m2
m2
m2
m2
Esempio
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
Misti: cellulari e laptop
Puoi combinare le classi per creare un layout dinamico e flessibile. Questo esempio produrrà un layout a due colonne con una divisione 83,34%/16,66% (l10, l2) su schermi grandi e una divisione 50%/50% (s6, s6) su schermi piccoli:
l10 s6
l2 s6
Esempio
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Misti: cellulari, tablet e laptop
Questo esempio produrrà un layout a tre colonne con una divisione del 25%/58,34%/16,66% (l3, l7, l2) su schermi grandi, 50%/25%/25% (m6, m3, m3) su schermi medi e a 33,3%/33,3%/33,3% (s4, s4, s4) su schermi piccoli:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Esempio
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
Differenza tra il riempimento di righe w3 e w3
La classe w3-row definisce un contenitore senza riempimento, mentre la classe w3-row-padding aggiunge un riempimento sinistro e destro di 8px a ciascuna colonna:
riga w3:
w3-riga-imbottitura:
Esempio
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Usando w3-rest
La classe w3-rest è una classe potente e flessibile che utilizzerà ciò che resta della colonna della griglia.
150px
riposo
75px
riposo
100px
100px
riposo
trimestre
80px
riposo
trimestre
trimestre
trimestre
35%
riposo
Esempio usando riposo
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
L'elemento che utilizza class="w3-rest" deve essere sempre l'ultimo elemento nel codice sorgente.
Usando la percentuale
Utilizzare la proprietà CSS width per determinare una larghezza specifica delle colonne.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Esempio
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>