W3.CSS - Griglie

W3.CSS fornisce una griglia reattiva ai fluidi a 12 colonne.

Utilizza le classi di stile w3-row e w3-col per definire rispettivamente righe e colonne.

Sr. No.	Nome e descrizione della classe
1	w3-row Specifica un contenitore senza riempimento da utilizzare per le colonne reattive. Questa classe è obbligatoria affinché le classi reattive siano completamente reattive.
2	w3-col Specifica una colonna con sottoclassi

w3-col ha diverse sottoclassi pensate per diversi tipi di schermi.

Colonne per dispositivi con schermo piccolo

Di seguito è riportato un elenco di stili a livello di colonna per i dispositivi con schermo piccolo, in genere gli smartphone.

Sr. No.	Nome e descrizione della classe
1	s1 Definisce 1 di 12 colonne con larghezza pari allo 08,33%.
2	s2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	s3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	s4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
5	s12 Definisce 12 colonne su 12 con larghezza pari al 100%. Classe predefinita per telefoni con schermo piccolo.

Colonne per dispositivi a schermo medio

Di seguito è riportato un elenco di stili a livello di colonna per dispositivi con schermo medio, in genere tablet.

Sr. No.	Nome e descrizione della classe
1	m1 Definisce 1 di 12 colonne con larghezza pari allo 08,33%.
2	m2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	m3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	m4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
5	m12 Definisce 12 colonne su 12 con larghezza pari al 100%. Classe predefinita per telefoni con schermo medio.

Colonne per dispositivi con schermo di grandi dimensioni

Di seguito è riportato un elenco di stili a livello di colonna per dispositivi con schermo di grandi dimensioni, in genere laptop.

Sr. No.	Nome e descrizione della classe
1	\|1 Definisce 1 di 12 colonne con larghezza pari allo 08,33%.
2	\|2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	\|3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	\|4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
5	\|12 Definisce 12 colonne su 12 con larghezza pari al 100%. Classe predefinita per dispositivi con schermo di grandi dimensioni.

Utilizzo

Ogni sottoclasse determina il numero di colonne della griglia da utilizzare in base al tipo di dispositivo. Considera il seguente frammento HTML.

<div class = "w3-row">
   <div class = "w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

Le colonne predefinite da utilizzare sono 12 su un dispositivo se una sottoclasse non è menzionata nell'attributo class di un elemento HTML.

Esempio

w3css_grids.htm

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>
      
         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>
      
         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>
      
      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
      
         <div class = "w3-col w3-container s4 m8 l9">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

Risultato

Verifica il risultato.