Material Design Lite - Griglie

La griglia Material Design Lite (MDL) è un componente per la disposizione dei contenuti per schermi di dimensioni variabili. La griglia MDL è definita e racchiusa da un elemento contenitore / div. Una griglia ha 12 colonne nella schermata delle dimensioni del desktop, 8 nella schermata delle dimensioni del tablet e 4 nella schermata delle dimensioni del telefono, dove ogni dimensione ha margini e margini interni predefiniti. Le celle sono disposte in modo sequenziale in una riga, nell'ordine in cui sono definite, con le seguenti eccezioni:

  • Se una cella della griglia non è adatta per la riga in una delle dimensioni dello schermo, scorre nella riga seguente.

  • Se una cella della griglia ha una dimensione di colonna specificata uguale o maggiore del numero di colonne per la dimensione dello schermo, occupa l'intera riga.

MDL fornisce varie classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti alla griglia. La tabella seguente elenca le classi disponibili e i loro effetti.

Sr.No. Nome e descrizione della classe
1

mdl-layout

Identifica un contenitore come componente MDL. Obbligatorio sull'elemento contenitore esterno.
2

mdl-grid

Identifica un contenitore come componente della griglia MDL. Obbligatorio per l'elemento div "esterno".
3

mdl-cell

Identifica un contenitore come cella MDL. Obbligatorio per gli elementi div "interni".
4

mdl-grid--no-spacing

Aggiorna le celle della griglia per non avere margini tra di loro. Opzionale per contenitore a griglia.
5

mdl-cell--N-col

Questo aiuta a mettere la dimensione della colonna per la cella su N, N è compreso tra 1 e 12, il valore predefinito è 4; opzionale per gli elementi div "interni".
6

mdl-cell--N-col-desktop

Questo aiuta a mettere la dimensione della colonna per la cella su N solo in modalità desktop, N è compreso tra 1 e 12; opzionale per gli elementi div "interni".
7

mdl-cell--N-col-tablet

Questo aiuta a mettere la dimensione della colonna per la cella su N solo in modalità tablet, N è compreso tra 1 e 8; opzionale per gli elementi div "interni".
8

mdl-cell--N-col-phone

Questo aiuta a mettere la dimensione della colonna per la cella su N solo in modalità telefono, N è 1-4 compreso; opzionale per gli elementi div "interni".
9

mdl-cell--hide-desktop

Nasconde la cella in modalità desktop. Facoltativo per elementi div "interni".
10

mdl-cell--hide-tablet

Nasconde la cella in modalità tablet. Facoltativo per elementi div "interni".
11

mdl-cell--hide-phone

Nasconde il cellulare in modalità telefono. Facoltativo per elementi div "interni".
12

mdl-cell--stretch

Allunga la cella verticalmente per riempire il genitore, predefinito; opzionale per gli elementi div "interni".
13

mdl-cell--top

Allinea la cella alla parte superiore del genitore. Facoltativo per elementi div "interni".
14

mdl-cell--middle

Allinea la cella al centro del genitore. Facoltativo per elementi div "interni".
15

mdl-cell--bottom

Allinea la cella alla parte inferiore del genitore. Facoltativo per elementi div "interni".

Esempio

Il seguente esempio ti aiuterà a capire l'uso della classe mdl-grid per il layout dei contenuti su vari schermi.

Le classi MDL fornite di seguito verranno utilizzate in questo esempio.

  • mdl-layout - Identifica un div come un componente MDL.

  • mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.

  • mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.

  • mdl-layout__header-row - Identifica il contenitore come riga di intestazione MDL.

  • mdl-layout__drawer - Identifica div come cassetto del layout MDL.

  • mdl-layout-title - Identifica il testo del titolo del layout.

  • mdl-navigation - Identifica div come gruppo di navigazione MDL.

  • mdl-navigation__link - Identifica l'ancora come collegamento di navigazione MDL.

  • mdl-layout__content - Identifica div come contenuto del layout MDL.

  • mdl-grid - Identifica div come un componente della griglia MDL.

  • mdl-cell - Identifica div come cella MDL.

  • mdl-cell--1-col - Imposta la dimensione della colonna per la cella su quella di 1 cella su 12 celle nella dimensione dello schermo del desktop.

  • mdl-cell--2-col - Imposta la dimensione della colonna per la cella su quella di 2 celle su 12 celle nella dimensione dello schermo del desktop.

  • mdl-cell--4-col - Imposta la dimensione della colonna per la cella su quella di 4 celle su 12 celle nella dimensione dello schermo del desktop.

  • mdl-cell--6-col - Imposta la dimensione della colonna per la cella su quella di 6 celle su 12 celle nella dimensione dello schermo del desktop.

  • mdl-cell--4-col-phone - Imposta la dimensione della colonna per la cella su quella di 4 celle su 4 celle nella dimensione dello schermo del telefono.

  • mdl-cell--6-col-tablet - Imposta la dimensione della colonna per la cella su quella di 6 celle su 8 celle nella dimensione dello schermo del tablet.

  • mdl-cell--8-col-tablet - Imposta la dimensione della colonna per la cella su quella di 8 celle su 8 celle nella dimensione dello schermo del tablet.

mdl_grid.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>  
            </nav>
         </div>
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>

Risultato

Verifica il risultato.