Material Design Lite-グリッド

Material Design Lite（MDL）グリッドは、さまざまな画面サイズのコンテンツをレイアウトするためのコンポーネントです。 MDLグリッドが定義され、コンテナ/div要素で囲まれています。グリッドには、デスクトップサイズの画面に12列、タブレットサイズの画面に8列、電話サイズの画面に4列があり、各サイズにはマージンと溝が事前に定義されています。セルは、次の例外を除き、定義された順序で連続して行に配置されます。

グリッドセルがいずれかの画面サイズの行に収まらない場合、次の行に流れます。 *グリッドセルに指定された列サイズが画面サイズの列数以上の場合、行全体を占有します。

MDLは、グリッドにさまざまな事前定義された視覚的および動作強化を適用するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。

Sr.No.	Class Name & Description
1	mdl-layout* コンテナーをMDLコンポーネントとして識別します。外側のコンテナ要素に必要です。
2	mdl-grid コンテナをMDLグリッドコンポーネントとして識別します。「外部」div要素で必要です。
3	mdl-cell コンテナーをMDLセルとして識別します。「内部」div要素で必要です。
4	mdl-grid—no-spacing グリッドセルを更新して、それらの間に余白がないようにします。グリッドコンテナのオプション。
5	mdl-cell—N-col これにより、セルの列サイズをNに設定できます。Nは1〜12で、デフォルトは4です。「内部」div要素のオプション。
6	mdl-cell—N-col-desktop これにより、デスクトップモードのみでセルの列サイズをNにすることができます。Nは1〜12です。「内部」div要素のオプション。
7	mdl-cell—N-col-tablet これは、セルの列サイズをタブレットモードでのみNにする場合に役立ちます。Nは1〜8です。「内部」div要素のオプション。
8	mdl-cell—N-col-phone これにより、セルの列サイズを電話モードでのみNに設定できます。Nは1〜4です。「内部」div要素のオプション。
9	mdl-cell—hide-desktop デスクトップモードのときにセルを非表示にします。「内部」div要素のオプション。
10	mdl-cell—hide-tablet タブレットモードのときにセルを非表示にします。「内部」div要素のオプション。
11	mdl-cell—hide-phone 電話モードのときにセルを非表示にします。「内部」div要素のオプション。
12	mdl-cell—stretch セルを垂直方向に引き伸ばして親を埋めます（デフォルト）。「内部」div要素のオプション。
13	mdl-cell—top セルを親の上部に揃えます。「内部」div要素のオプション。
14	mdl-cell—middle セルを親の中央に揃えます。「内部」div要素のオプション。
15	mdl-cell—bottom セルを親の下部に揃えます。「内部」div要素のオプション。

例

次の例は、mdl-gridクラスを使用してさまざまな画面にコンテンツをレイアウトする方法を理解するのに役立ちます。

この例では、以下に示すMDLクラスが使用されます。

mdl-layout -divをMDLコンポーネントとして識別します。
mdl-js-layout -外部divに基本的なMDL動作を追加します。
mdl-layout—fixed-header -小さな画面でもヘッダーを常に表示します。
mdl-layout__header-row -コンテナをMDLヘッダー行として識別します。
mdl-layout__drawer -divをMDLレイアウトドロワーとして識別します。
mdl-layout-title -レイアウトタイトルテキストを識別します。
mdl-navigation -divをMDLナビゲーショングループとして識別します。
mdl-navigation__link -アンカーをMDLナビゲーションリンクとして識別します。
mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。
mdl-grid -divをMDLグリッドコンポーネントとして識別します。
mdl-cell -divをMDLセルとして識別します。
mdl-cell—1-col -セルの列サイズをデスクトップ画面サイズの12セルのうち1セルのサイズに設定します。
mdl-cell—2-col -セルの列サイズをデスクトップ画面サイズの12セルのうち2セルに設定します。
mdl-cell—4-col -セルの列サイズをデスクトップ画面サイズの12セルのうち4セルに設定します。
mdl-cell—6-col -セルの列サイズをデスクトップ画面サイズの12セルのうち6セルのサイズに設定します。
mdl-cell—4-col-phone -セルの列サイズを、電話画面サイズの4つのセルのうち4つのセルのサイズに設定します。
mdl-cell—6-col-tablet -タブレット画面サイズの8セルのうち6セルのセルの列サイズを設定します。
mdl-cell—8-col-tablet -タブレット画面サイズの8セルのうち8セルのセルの列サイズを設定します。

mdl_grid

<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>

結果

結果を確認します。

Materialdesignlite-grids

Material Design Lite-グリッド

例

mdl_grid

結果

目次