Material Design Lite - Grids

A grade Material Design Lite (MDL) é um componente de layout de conteúdo para vários tamanhos de tela. A grade MDL é definida e delimitada por um elemento container / div. Uma grade tem 12 colunas na tela do desktop, 8 na tela do tablet e 4 na tela do telefone, onde cada tamanho tem margens e calhas predefinidas. As células são dispostas de maneira sequencial em uma linha, na ordem em que são definidas, com as seguintes exceções:

  • Se uma célula de grade não for adequada para a linha em um dos tamanhos de tela, ela fluirá para a linha seguinte.

  • Se uma célula de grade tiver um tamanho de coluna especificado igual ou maior que o número de colunas para o tamanho da tela, ela ocupará toda a linha.

O MDL fornece várias classes CSS para aplicar vários aprimoramentos visuais e comportamentais predefinidos à grade. A tabela a seguir lista as classes disponíveis e seus efeitos.

Sr. Não. Nome e descrição da classe
1

mdl-layout

Identifica um contêiner como um componente MDL. Obrigatório no elemento de contêiner externo.
2

mdl-grid

Identifica um contêiner como um componente de grade MDL. Obrigatório no elemento div "externo".
3

mdl-cell

Identifica um contêiner como uma célula MDL. Obrigatório em elementos div "internos".
4

mdl-grid--no-spacing

Atualiza as células da grade para que não haja margem entre elas. Opcional para contêiner de grade.
5

mdl-cell--N-col

Isso ajuda a colocar o tamanho da coluna da célula em N, N é 1-12 inclusive, o padrão é 4; opcional para elementos div "internos".
6

mdl-cell--N-col-desktop

Isso ajuda a colocar o tamanho da coluna da célula em N apenas no modo desktop, N é 1-12 inclusive; opcional para elementos div "internos".
7

mdl-cell--N-col-tablet

Isso ajuda a colocar o tamanho da coluna da célula em N apenas no modo de comprimido, N é 1-8 inclusive; opcional para elementos div "internos".
8

mdl-cell--N-col-phone

Isso ajuda a colocar o tamanho da coluna da célula em N apenas no modo de telefone, N é 1-4 inclusive; opcional para elementos div "internos".
9

mdl-cell--hide-desktop

Oculta a célula no modo desktop. Opcional para elementos div "internos".
10

mdl-cell--hide-tablet

Oculta a célula no modo tablet. Opcional para elementos div "internos".
11

mdl-cell--hide-phone

Oculta o celular quando está no modo telefone. Opcional para elementos div "internos".
12

mdl-cell--stretch

Estica a célula verticalmente para preencher o pai, padrão; opcional para elementos div "internos".
13

mdl-cell--top

Alinha a célula com a parte superior do pai. Opcional para elementos div "internos".
14

mdl-cell--middle

Alinha a célula ao meio do pai. Opcional para elementos div "internos".
15

mdl-cell--bottom

Alinha a célula com a parte inferior do pai. Opcional para elementos div "internos".

Exemplo

O exemplo a seguir o ajudará a entender o uso da classe mdl-grid para fazer o layout de conteúdo em várias telas.

As classes MDL fornecidas abaixo serão usadas neste exemplo.

  • mdl-layout - Identifica um div como um componente MDL.

  • mdl-js-layout - Adiciona comportamento MDL básico ao div externo.

  • mdl-layout--fixed-header - Torna o cabeçalho sempre visível, mesmo em telas pequenas.

  • mdl-layout__header-row - Identifica o contêiner como uma linha de cabeçalho MDL.

  • mdl-layout__drawer - Identifica div como gaveta de layout MDL.

  • mdl-layout-title - Identifica o texto do título do layout.

  • mdl-navigation - Identifica div como grupo de navegação MDL.

  • mdl-navigation__link - Identifica a âncora como um link de navegação MDL.

  • mdl-layout__content - Identifica div como conteúdo de layout MDL.

  • mdl-grid - Identifica div como um componente de grade MDL.

  • mdl-cell - Identifica div como célula MDL.

  • mdl-cell--1-col - Define o tamanho da coluna da célula para 1 célula de 12 células no tamanho da tela da área de trabalho.

  • mdl-cell--2-col - Define o tamanho da coluna da célula para 2 células de 12 células no tamanho da tela da área de trabalho.

  • mdl-cell--4-col - Define o tamanho da coluna da célula para 4 células de 12 células no tamanho da tela da área de trabalho.

  • mdl-cell--6-col - Define o tamanho da coluna da célula para 6 células de 12 células no tamanho da tela da área de trabalho.

  • mdl-cell--4-col-phone - Define o tamanho da coluna da célula para 4 células em 4 células no tamanho da tela do telefone.

  • mdl-cell--6-col-tablet - Define o tamanho da coluna da célula para 6 células de 8 células no tamanho da tela do tablet.

  • mdl-cell--8-col-tablet - Define o tamanho da coluna da célula para 8 células de 8 células no tamanho da tela do 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>

Resultado

Verifique o resultado.