Material Design Lite - Gitter

Das Material Design Lite (MDL) -Raster ist eine Komponente zum Anlegen von Inhalten für unterschiedliche Bildschirmgrößen. Das MDL-Raster wird von einem Container / Div-Element definiert und eingeschlossen. Ein Raster enthält 12 Spalten im Bildschirm für die Desktopgröße, 8 im Bildschirm für die Tablet-Größe und 4 Spalten im Bildschirm für die Telefongröße, wobei jede Größe vordefinierte Ränder und Rinnen aufweist. Die Zellen werden nacheinander in der angegebenen Reihenfolge in einer Reihenfolge angeordnet, mit folgenden Ausnahmen:

Wenn eine Rasterzelle in einer der Bildschirmgrößen nicht für die Zeile geeignet ist, fließt sie in die folgende Zeile.
Wenn eine Rasterzelle eine angegebene Spaltengröße hat, die gleich oder größer als die Anzahl der Spalten für die Bildschirmgröße ist, nimmt sie die gesamte Zeile ein.

MDL bietet verschiedene CSS-Klassen, um verschiedene vordefinierte visuelle und Verhaltensverbesserungen auf das Raster anzuwenden. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr.	Klassenname & Beschreibung
1	mdl-layout Identifiziert einen Container als MDL-Komponente. Erforderlich am äußeren Behälterelement.
2	mdl-grid Identifiziert einen Container als MDL-Grid-Komponente. Erforderlich für "äußeres" div-Element.
3	mdl-cell Identifiziert einen Container als MDL-Zelle. Erforderlich für "innere" div-Elemente.
4	mdl-grid--no-spacing Aktualisiert die Rasterzellen so, dass kein Abstand zwischen ihnen besteht. Optional für Gittercontainer.
5	mdl-cell--N-col Dies hilft dabei, die Spaltengröße für die Zelle auf N zu setzen, N ist 1-12 einschließlich, standardmäßig 4; optional für "innere" div-Elemente.
6	mdl-cell--N-col-desktop Dies hilft, die Spaltengröße für die Zelle nur im Desktop-Modus auf N zu setzen. N ist 1-12 einschließlich; optional für "innere" div-Elemente.
7	mdl-cell--N-col-tablet Dies hilft, die Spaltengröße für die Zelle nur im Tablettenmodus auf N zu setzen. N ist 1-8 einschließlich; optional für "innere" div-Elemente.
8	mdl-cell--N-col-phone Dies hilft, die Spaltengröße für die Zelle nur im Telefonmodus auf N zu setzen. N ist 1-4 einschließlich; optional für "innere" div-Elemente.
9	mdl-cell--hide-desktop Blendet die Zelle im Desktop-Modus aus. Optional für "innere" div-Elemente.
10	mdl-cell--hide-tablet Blendet die Zelle im Tablet-Modus aus. Optional für "innere" div-Elemente.
11	mdl-cell--hide-phone Blendet die Zelle im Telefonmodus aus. Optional für "innere" div-Elemente.
12	mdl-cell--stretch Streckt die Zelle vertikal, um das übergeordnete Element standardmäßig zu füllen. optional für "innere" div-Elemente.
13	mdl-cell--top Richtet die Zelle am oberen Rand des übergeordneten Elements aus. Optional für "innere" div-Elemente.
14	mdl-cell--middle Richtet die Zelle an der Mitte des übergeordneten Elements aus. Optional für "innere" div-Elemente.
15	mdl-cell--bottom Richtet die Zelle am unteren Rand des übergeordneten Elements aus. Optional für "innere" div-Elemente.

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-grid-Klasse zum Layouten von Inhalten auf verschiedenen Bildschirmen zu verstehen.

In diesem Beispiel werden die unten angegebenen MDL-Klassen verwendet.

mdl-layout - Identifiziert ein div als MDL-Komponente.
mdl-js-layout - Fügt dem äußeren Div ein grundlegendes MDL-Verhalten hinzu.
mdl-layout--fixed-header - Macht den Header auch in kleinen Bildschirmen immer sichtbar.
mdl-layout__header-row - Identifiziert den Container als MDL-Headerzeile.
mdl-layout__drawer - Identifiziert div als MDL-Layout-Schublade.
mdl-layout-title - Identifiziert den Layout-Titeltext.
mdl-navigation - Identifiziert div als MDL-Navigationsgruppe.
mdl-navigation__link - Identifiziert den Anker als MDL-Navigationslink.
mdl-layout__content - Identifiziert div als MDL-Layoutinhalt.
mdl-grid - Identifiziert div als MDL-Grid-Komponente.
mdl-cell - Identifiziert div als MDL-Zelle.
mdl-cell--1-col - Legt die Spaltengröße für die Zelle auf die von 1 Zelle von 12 Zellen in der Desktop-Bildschirmgröße fest.
mdl-cell--2-col - Legt die Spaltengröße für die Zelle auf die von 2 Zellen von 12 Zellen in der Desktop-Bildschirmgröße fest.
mdl-cell--4-col - Legt die Spaltengröße für die Zelle auf die von 4 Zellen von 12 Zellen in der Desktop-Bildschirmgröße fest.
mdl-cell--6-col - Legt die Spaltengröße für die Zelle auf 6 von 12 Zellen in der Desktop-Bildschirmgröße fest.
mdl-cell--4-col-phone - Legt die Spaltengröße für die Zelle auf 4 von 4 Zellen in der Bildschirmgröße des Telefons fest.
mdl-cell--6-col-tablet - Legt die Spaltengröße für die Zelle auf die von 6 Zellen von 8 Zellen in der Bildschirmgröße des Tablets fest.
mdl-cell--8-col-tablet - Legt die Spaltengröße für die Zelle auf die von 8 Zellen von 8 Zellen in der Bildschirmgröße des Tablets fest.

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>

Ergebnis

Überprüfen Sie das Ergebnis.