Material Design Lite - Lưới

Lưới Material Design Lite (MDL) là một thành phần để sắp xếp nội dung cho các kích thước màn hình khác nhau. Lưới MDL được xác định và bao quanh bởi một phần tử container / div. Một lưới có 12 cột trong màn hình kích thước máy tính để bàn, 8 trong màn hình kích thước máy tính bảng và 4 trong màn hình kích thước điện thoại, trong đó mỗi kích thước đều có lề và rãnh được xác định trước. Các ô được sắp xếp theo cách tuần tự trong một hàng, theo thứ tự chúng được xác định, với các ngoại lệ sau:

Nếu ô lưới không vừa với hàng ở một trong các kích thước màn hình, ô đó sẽ chảy vào dòng sau.
Nếu ô lưới có kích thước cột được chỉ định bằng hoặc lớn hơn số cột cho kích thước màn hình, thì ô đó sẽ chiếm toàn bộ hàng.

MDL cung cấp các lớp CSS khác nhau để áp dụng các cải tiến hình ảnh và hành vi được xác định trước khác nhau cho lưới. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.

Sr.No.	Tên & Mô tả Lớp học
1	mdl-layout Xác định một vùng chứa là một thành phần MDL. Bắt buộc đối với phần tử vùng chứa bên ngoài.
2	mdl-grid Xác định vùng chứa dưới dạng thành phần lưới MDL. Bắt buộc trên phần tử div "bên ngoài".
3	mdl-cell Xác định một vùng chứa là một ô MDL. Bắt buộc đối với các phần tử div "bên trong".
4	mdl-grid--no-spacing Cập nhật các ô lưới để không có lề giữa chúng. Tùy chọn cho vùng chứa lưới.
5	mdl-cell--N-col Điều này giúp đặt kích thước cột cho ô thành N, N là 1-12, mặc định là 4; tùy chọn cho các phần tử div "bên trong".
6	mdl-cell--N-col-desktop Điều này giúp đặt kích thước cột cho ô thành N chỉ trong chế độ máy tính để bàn, N là 1-12 bao gồm; tùy chọn cho các phần tử div "bên trong".
7	mdl-cell--N-col-tablet Điều này giúp đặt kích thước cột cho ô thành N chỉ trong chế độ máy tính bảng, N là 1-8; tùy chọn cho các phần tử div "bên trong".
số 8	mdl-cell--N-col-phone Điều này giúp đặt kích thước cột cho ô thành N chỉ trong chế độ điện thoại, N là 1-4; tùy chọn cho các phần tử div "bên trong".
9	mdl-cell--hide-desktop Ẩn ô khi ở chế độ máy tính để bàn. Tùy chọn cho các phần tử div "bên trong".
10	mdl-cell--hide-tablet Ẩn ô khi ở chế độ máy tính bảng. Tùy chọn cho các phần tử div "bên trong".
11	mdl-cell--hide-phone Ẩn ô khi ở chế độ điện thoại. Tùy chọn cho các phần tử div "bên trong".
12	mdl-cell--stretch Kéo dài ô theo chiều dọc để điền vào ô cha, mặc định; tùy chọn cho các phần tử div "bên trong".
13	mdl-cell--top Căn chỉnh ô với đầu ô chính. Tùy chọn cho các phần tử div "bên trong".
14	mdl-cell--middle Căn chỉnh ô ở giữa ô chính. Tùy chọn cho các phần tử div "bên trong".
15	mdl-cell--bottom Căn chỉnh ô ở dưới cùng của ô chính. Tùy chọn cho các phần tử div "bên trong".

Thí dụ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng lớp mdl-grid để bố trí nội dung trên các màn hình khác nhau.

Các lớp MDL dưới đây sẽ được sử dụng trong ví dụ này.

mdl-layout - Xác định một div như một thành phần MDL.
mdl-js-layout - Thêm hành vi MDL cơ bản vào div bên ngoài.
mdl-layout--fixed-header - Làm cho tiêu đề luôn hiển thị, ngay cả trong màn hình nhỏ.
mdl-layout__header-row - Xác định vùng chứa dưới dạng hàng tiêu đề MDL.
mdl-layout__drawer - Xác định div là ngăn bố trí MDL.
mdl-layout-title - Xác định bố cục tiêu đề văn bản.
mdl-navigation - Xác định div là nhóm điều hướng MDL.
mdl-navigation__link - Xác định anchor là liên kết điều hướng MDL.
mdl-layout__content - Xác định div là nội dung bố cục MDL.
mdl-grid - Xác định div như một thành phần lưới MDL.
mdl-cell - Xác định div là ô MDL.
mdl-cell--1-col - Đặt kích thước cột cho ô bằng 1 ô trong số 12 ô ở kích thước màn hình máy tính để bàn.
mdl-cell--2-col - Đặt kích thước cột cho ô thành 2 ô trong số 12 ô ở kích thước màn hình máy tính để bàn.
mdl-cell--4-col - Đặt kích thước cột cho ô thành 4 ô trong số 12 ô ở kích thước màn hình máy tính để bàn.
mdl-cell--6-col - Đặt kích thước cột cho ô bằng 6 ô trong số 12 ô ở kích thước màn hình máy tính để bàn.
mdl-cell--4-col-phone - Đặt kích thước cột cho ô thành 4 ô trong số 4 ô ở kích thước màn hình điện thoại.
mdl-cell--6-col-tablet - Đặt kích thước cột cho ô thành 6 ô trong số 8 ô ở kích thước màn hình máy tính bảng.
mdl-cell--8-col-tablet - Đặt kích thước cột cho ô thành 8 ô trong số 8 ô ở kích thước màn hình máy tính bảng.

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>

Kết quả

Xác minh kết quả.