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.