Материал Дизайн Лайт — Сетки

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

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

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

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

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

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

лея-макет

Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера.

лея сетки

Определяет контейнер как компонент сетки MDL. Обязательный для «внешнего» элемента div.

лея-элементная

Определяет контейнер как ячейку MDL. Требуется на «внутренние» элементы div.

лея сетки — нет-разнос

Обновляет ячейки сетки, чтобы между ними не было полей. Опционально для сетки контейнера.

MDL-клеток — N-Col

Это помогает установить размер столбца для ячейки на N, N — 1-12 включительно, по умолчанию — 4; необязательно для «внутренних» элементов div.

MDL-клеток — N-Col-рабочий стол

Это помогает установить размер столбца для ячейки на N только в режиме рабочего стола, N — 1-12 включительно; необязательно для «внутренних» элементов div.

MDL-клеток — N-Col-планшет

Это помогает установить размер столбца для ячейки на N только в режиме планшета, N — 1-8 включительно; необязательно для «внутренних» элементов div.

лея-клеток — N-кол-телефон

Это помогает установить размер столбца для ячейки на N только в режиме телефона, N — 1-4 включительно; необязательно для «внутренних» элементов div.

лея-клетка — прятки рабочий стол

Скрывает ячейку в режиме рабочего стола. Необязательно для «внутренних» элементов div.

лея-клетка — прятки таблетка

Скрывает ячейку в режиме планшета. Необязательно для «внутренних» элементов div.

лея-клетка — прятки телефон

Скрывает ячейку в режиме телефона. Необязательно для «внутренних» элементов div.

MDL-клеток — растяжение

Растягивает ячейку по вертикали, чтобы заполнить родительский элемент, по умолчанию; необязательно для «внутренних» элементов div.

лея-клетки — верхняя

Выравнивает ячейку по верху родительского элемента. Необязательно для «внутренних» элементов div.

лея-клеток — средний

Выравнивает ячейку по центру родителя. Необязательно для «внутренних» элементов div.

лея-элементная — нижний

Выравнивает ячейку по низу родителя. Необязательно для «внутренних» элементов 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-colo — устанавливает размер столбца для ячейки равным 6 ячейкам из 12 ячеек в размере экрана рабочего стола.

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

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

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

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-colo — устанавливает размер столбца для ячейки равным 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

Live Demo

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