Material Design Lite - Grids

Kisi Material Design Lite (MDL) adalah komponen untuk menata konten untuk berbagai ukuran layar. Kisi MDL ditentukan dan diapit oleh elemen kontainer / div. Petak memiliki 12 kolom di layar ukuran desktop, 8 di layar ukuran tablet, dan 4 di layar ukuran ponsel, di mana setiap ukuran memiliki margin dan talang yang telah ditentukan sebelumnya. Sel disusun secara berurutan dalam satu baris, dalam urutan yang ditentukan, dengan pengecualian berikut:

Jika sel kisi tidak pas untuk baris di salah satu ukuran layar, itu mengalir ke baris berikut.
Jika sel kisi memiliki ukuran kolom yang ditentukan sama dengan atau lebih besar dari jumlah kolom untuk ukuran layar, itu mengambil seluruh baris.

MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke kisi. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.

Sr.No.	Nama & Deskripsi Kelas
1	mdl-layout Mengidentifikasi wadah sebagai komponen MDL. Diperlukan pada elemen penampung luar.
2	mdl-grid Mengidentifikasi wadah sebagai komponen jaringan MDL. Diperlukan pada elemen div "luar".
3	mdl-cell Mengidentifikasi wadah sebagai sel MDL. Diperlukan pada elemen div "dalam".
4	mdl-grid--no-spacing Memperbarui sel kisi agar tidak memiliki margin di antara mereka. Opsional untuk wadah kisi.
5	mdl-cell--N-col Ini membantu menempatkan ukuran kolom untuk sel ke N, N adalah 1-12 inklusif, default ke 4; opsional untuk elemen div "dalam".
6	mdl-cell--N-col-desktop Ini membantu menempatkan ukuran kolom untuk sel ke N dalam mode desktop saja, N adalah 1-12 inklusif; opsional untuk elemen div "dalam".
7	mdl-cell--N-col-tablet Ini membantu menempatkan ukuran kolom untuk sel ke N dalam mode tablet saja, N adalah 1-8 inklusif; opsional untuk elemen div "dalam".
8	mdl-cell--N-col-phone Ini membantu menempatkan ukuran kolom untuk sel ke N dalam mode telepon saja, N adalah 1-4 inklusif; opsional untuk elemen div "dalam".
9	mdl-cell--hide-desktop Menyembunyikan sel saat dalam mode desktop. Opsional untuk elemen div "dalam".
10	mdl-cell--hide-tablet Menyembunyikan sel saat dalam mode tablet. Opsional untuk elemen div "dalam".
11	mdl-cell--hide-phone Menyembunyikan sel saat dalam mode telepon. Opsional untuk elemen div "dalam".
12	mdl-cell--stretch Meregangkan sel secara vertikal untuk mengisi induk, default; opsional untuk elemen div "dalam".
13	mdl-cell--top Meratakan sel ke bagian atas induk. Opsional untuk elemen div "dalam".
14	mdl-cell--middle Meratakan sel ke tengah induk. Opsional untuk elemen div "dalam".
15	mdl-cell--bottom Meratakan sel ke bagian bawah induk. Opsional untuk elemen div "dalam".

Contoh

Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-grid untuk mengatur tata letak konten di berbagai layar.

Kelas MDL yang diberikan di bawah ini akan digunakan dalam contoh ini.

mdl-layout - Mengidentifikasi div sebagai komponen MDL.
mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl-layout__header-row - Mengidentifikasi wadah sebagai baris tajuk MDL.
mdl-layout__drawer - Mengidentifikasi div sebagai laci tata letak MDL.
mdl-layout-title - Mengidentifikasi teks judul tata letak.
mdl-navigation - Mengidentifikasi div sebagai grup navigasi MDL.
mdl-navigation__link - Mengidentifikasi jangkar sebagai tautan navigasi MDL.
mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.
mdl-grid - Mengidentifikasi div sebagai komponen jaringan MDL.
mdl-cell - Mengidentifikasi div sebagai sel MDL.
mdl-cell--1-col - Menetapkan ukuran kolom untuk sel dengan ukuran 1 sel dari 12 sel dalam ukuran layar desktop.
mdl-cell--2-col - Menyetel ukuran kolom untuk sel menjadi 2 sel dari 12 sel dalam ukuran layar desktop.
mdl-cell--4-col - Menyetel ukuran kolom untuk sel menjadi 4 sel dari 12 sel dalam ukuran layar desktop.
mdl-cell--6-col - Mengatur ukuran kolom untuk sel dengan 6 sel dari 12 sel dalam ukuran layar desktop.
mdl-cell--4-col-phone - Menetapkan ukuran kolom untuk sel dengan 4 sel dari 4 sel dalam ukuran layar ponsel.
mdl-cell--6-col-tablet - Mengatur ukuran kolom untuk sel dengan 6 sel dari 8 sel dalam ukuran layar tablet.
mdl-cell--8-col-tablet - Menyetel ukuran kolom untuk sel dengan 8 sel dari 8 sel dalam ukuran layar 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>

Hasil

Verifikasi hasilnya.