Material Design Lite - Grilles

La grille Material Design Lite (MDL) est un composant permettant de disposer du contenu pour différentes tailles d'écran. La grille MDL est définie et entourée par un élément container / div. Une grille comporte 12 colonnes dans l'écran de la taille du bureau, 8 dans l'écran de la taille de la tablette et 4 dans l'écran de la taille du téléphone, où chaque taille a des marges et des gouttières prédéfinies. Les cellules sont disposées de manière séquentielle dans une ligne, dans l'ordre dans lequel elles sont définies, avec les exceptions suivantes:

Si une cellule de la grille n'est pas adaptée à la ligne dans l'une des tailles d'écran, elle passe dans la ligne suivante.
Si une cellule de la grille a une taille de colonne spécifiée égale ou supérieure au nombre de colonnes pour la taille d'écran, elle occupe la ligne entière.

MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies à la grille. Le tableau suivant répertorie les classes disponibles et leurs effets.

N ° Sr.	Nom et description de la classe
1	mdl-layout Identifie un conteneur en tant que composant MDL. Requis sur l'élément de conteneur extérieur.
2	mdl-grid Identifie un conteneur en tant que composant de grille MDL. Obligatoire sur l'élément div "externe".
3	mdl-cell Identifie un conteneur en tant que cellule MDL. Obligatoire sur les éléments div "internes".
4	mdl-grid--no-spacing Met à jour les cellules de la grille pour ne pas avoir de marge entre elles. Facultatif pour le conteneur de grille.
5	mdl-cell--N-col Cela aide à mettre la taille de colonne de la cellule à N, N est compris entre 1 et 12, la valeur par défaut est 4; facultatif pour les éléments div "internes".
6	mdl-cell--N-col-desktop Cela permet de mettre la taille de colonne de la cellule sur N en mode bureau uniquement, N est compris entre 1 et 12; facultatif pour les éléments div "internes".
sept	mdl-cell--N-col-tablet Cela permet de mettre la taille de colonne de la cellule à N en mode tablette uniquement, N étant compris entre 1 et 8; facultatif pour les éléments div "internes".
8	mdl-cell--N-col-phone Cela permet de mettre la taille de la colonne de la cellule sur N en mode téléphone uniquement, N étant compris entre 1 et 4; facultatif pour les éléments div "internes".
9	mdl-cell--hide-desktop Masque la cellule en mode bureau. Facultatif pour les éléments div "internes".
dix	mdl-cell--hide-tablet Masque la cellule en mode tablette. Facultatif pour les éléments div "internes".
11	mdl-cell--hide-phone Masque la cellule en mode téléphone. Facultatif pour les éléments div "internes".
12	mdl-cell--stretch Étire la cellule verticalement pour remplir le parent, par défaut; facultatif pour les éléments div "internes".
13	mdl-cell--top Aligne la cellule sur le haut du parent. Facultatif pour les éléments div "internes".
14	mdl-cell--middle Aligne la cellule au milieu du parent. Facultatif pour les éléments div "internes".
15	mdl-cell--bottom Aligne la cellule au bas du parent. Facultatif pour les éléments div "internes".

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation de la classe mdl-grid pour mettre en page le contenu sur différents écrans.

Les classes MDL données ci-dessous seront utilisées dans cet exemple.

mdl-layout - Identifie un div comme un composant MDL.
mdl-js-layout - Ajoute un comportement MDL de base à la division externe.
mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.
mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.
mdl-layout__drawer - Identifie div comme tiroir de mise en page MDL.
mdl-layout-title - Identifie le texte du titre de la mise en page.
mdl-navigation - Identifie div comme groupe de navigation MDL.
mdl-navigation__link - Identifie l'ancre comme lien de navigation MDL.
mdl-layout__content - Identifie div comme contenu de mise en page MDL.
mdl-grid - Identifie div comme un composant de grille MDL.
mdl-cell - Identifie div comme cellule MDL.
mdl-cell--1-col - Définit la taille de la colonne de la cellule sur celle d'une cellule sur 12 dans la taille de l'écran du bureau.
mdl-cell--2-col - Définit la taille de la colonne de la cellule sur celle de 2 cellules sur 12 dans la taille de l'écran du bureau.
mdl-cell--4-col - Définit la taille de la colonne de la cellule sur celle de 4 cellules sur 12 dans la taille de l'écran du bureau.
mdl-cell--6-col - Définit la taille de la colonne de la cellule sur celle de 6 cellules sur 12 dans la taille de l'écran du bureau.
mdl-cell--4-col-phone - Définit la taille de la colonne de la cellule sur celle de 4 cellules sur 4 dans la taille de l'écran du téléphone.
mdl-cell--6-col-tablet - Définit la taille de la colonne de la cellule sur celle de 6 cellules sur 8 dans la taille de l'écran de la tablette.
mdl-cell--8-col-tablet - Définit la taille de la colonne de la cellule sur celle de 8 cellules sur 8 cellules de la taille de l'écran de la tablette.

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>

Résultat

Vérifiez le résultat.