O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Sistema de grid

O mdui fornece um sistema de grade de 12 colunas responsivo e que prioriza dispositivos móveis.

Leitura relacionada

Diretrizes de design do Material Design: Layout - IU Responsiva

Contêiner de layout

O mdui requer um contêiner .mdui-container para envolver o conteúdo da página e o sistema de grade. Fornecemos duas classes para este propósito.

A classe .mdui-container ocupa entre 92% e 96% da largura da tela, com uma largura máxima de 1280px.

<body>
  <div class="mdui-container">
    ...
  </div>
</body>

A classe .mdui-container-fluid ocupará sempre 100% da largura da tela.

<body>
  <div class="mdui-container-fluid">
    ...
  </div>
</body>

Grade básica

.mdui-row deve estar contida dentro de .mdui-container ou .mdui-container-fluid para garantir o alinhamento e o preenchimento (padding) adequados.

Contém várias classes .mdui-col-xs-[1-12] dentro de .mdui-row, onde o número em .mdui-col-xs-[1-12] indica quantas colunas o elemento ocupa.

Se o número total de colunas em uma linha exceder 12, as colunas extras começarão em uma nova linha.

Exemplo

<div class="mdui-row">
  <div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>

Grade responsiva

.mdui-col-xs-[1-12] Aplica-se a todos os dispositivos de tela, como celulares, computadores, etc.
.mdui-col-sm-[1-12] Aplica-se a telas pequenas e maiores, como tablets.
.mdui-col-md-[1-12] Aplica-se a telas médias e maiores, como laptops.
.mdui-col-lg-[1-12] Aplica-se a telas grandes e maiores, como desktops.
.mdui-col-xl-[1-12] Aplica-se a telas extra grandes, como televisões.

Misturar essas classes permite obter efeitos responsivos.

Os breakpoints responsivos são os seguintes:

class	Intervalo	Largura da calha (gutter)
`.mdui-col-xs-[1-12]`	> 0px	16px (8px à esquerda e à direita de cada coluna)
`.mdui-col-sm-[1-12]`	> 600px
`.mdui-col-md-[1-12]`	> 1024px
`.mdui-col-lg-[1-12]`	> 1440px
`.mdui-col-xl-[1-12]`	> 1920px

Exemplo

<!-- Em dispositivos de tela extra pequena, a primeira coluna tem 100% de largura e a segunda tem 50%. Em dispositivos de tela pequena e maiores, a primeira coluna tem 66,6% de largura e a segunda tem 33,3%. -->
<div class="mdui-row">
  <div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- Em dispositivos de tela extra pequena, cada coluna tem 50% de largura; em dispositivos de tela pequena e maiores, cada coluna tem 33,3%. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- Em todos os dispositivos, cada coluna tem 50% de largura. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>

Espaçamento entre colunas

Por padrão, existe um espaçamento de 16px entre as colunas. Basta adicionar a classe .mdui-row-gapless ao .mdui-row para remover esse espaçamento.

Exemplo

<div class="mdui-row mdui-row-gapless">
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>

Deslocamento de coluna

Usar .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] e .mdui-col-offset-xl-[1-12] permite deslocar colunas para a direita. O número na classe indica quantas colunas deslocar.

Exemplo

<div class="mdui-row">
  <div class="mdui-col-md-4">.mdui-col-md-4</div>
  <div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>

Colunas aninhadas

O aninhamento de colunas é feito adicionando novos elementos .mdui-row e .mdui-col-[*] dentro de colunas já existentes. As colunas contidas na linha aninhada não devem exceder 12.

Exemplo

<div class="mdui-row">
  <div class="mdui-col-xs-9">
    Level 1: .col-xs-9
    <div class="mdui-row">
      <div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
      <div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
    </div>
  </div>
</div>

Colunas divididas igualmente

Contém vários elementos com a classe .mdui-col dentro de .mdui-row-xs-[1-12], e esses elementos serão divididos igualmente. Por exemplo: cada elemento .mdui-col em .mdui-row-xs-5 ocupará 20% da largura.

Exemplo

<div class="mdui-row-xs-5">
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
</div>

Misturar .mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12], .mdui-row-xl-[1-12] permite criar layouts responsivos.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-container`	Contêiner de layout com limite de largura
`.mdui-container-fluid`	Contêiner de layout de largura total (100%)
`.mdui-row`	Define uma linha
`.mdui-col-[xs\|sm\|md\|lg\|xl]-[1-12]`	Define uma coluna
`.mdui-row-gapless`	Remove o espaçamento entre colunas
`.mdui-col-offset-[xs\|sm\|md\|lg\|xl]-[1-12]`	Deslocamento de coluna
`.mdui-row-[xs\|sm\|md\|lg\|xl]-[1-12]`	Colunas divididas igualmente

Fonte Roboto

Tipografia