Material Design Lite - сетки

Сетка Material Design Lite (MDL) - это компонент для размещения контента для экранов разных размеров. Сетка MDL определяется и заключена в элемент контейнера / div. Сетка имеет 12 столбцов на экране размера рабочего стола, 8 на экране размера планшета и 4 на экране размера телефона, где каждый размер имеет предварительно определенные поля и промежутки. Ячейки располагаются последовательно в ряду, в том порядке, в котором они определены, за следующими исключениями:

  • Если ячейка сетки не подходит для строки одного из размеров экрана, она перетекает в следующую строку.

  • Если ячейка сетки имеет указанный размер столбца, равный или больший, чем количество столбцов для размера экрана, она занимает всю строку.

MDL предоставляет различные классы CSS для применения к сетке различных предопределенных визуальных и поведенческих улучшений. В следующей таблице перечислены доступные классы и их эффекты.

Sr. No. Имя и описание класса
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 - Добавляет базовое поведение MDL к внешнему div.

  • 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 - Устанавливает размер столбца для ячейки равным размеру 1 ячейки из 12 в размере экрана рабочего стола.

  • mdl-cell--2-col - Устанавливает размер столбца для ячейки равным 2 ячейкам из 12 ячеек в размере экрана рабочего стола.

  • mdl-cell--4-col - Устанавливает размер столбца для ячейки равным 4 ячейкам из 12 в размере экрана рабочего стола.

  • mdl-cell--6-col - Устанавливает размер столбца для ячейки равным 6 ячейкам из 12 в размере экрана рабочего стола.

  • mdl-cell--4-col-phone - Устанавливает размер столбца для ячейки равным 4 ячейкам из 4 ячеек в размере экрана телефона.

  • mdl-cell--6-col-tablet - Устанавливает размер столбца для ячейки равным 6 ячейкам из 8 ячеек в размере экрана планшета.

  • mdl-cell--8-col-tablet - Устанавливает размер столбца для ячейки равным 8 ячейкам из 8 ячеек в размере экрана планшета.

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>

Результат

Проверьте результат.