Esta é uma grade simples de usar, bem intuitiva até. A ideia é eliminar a necessidade de colocar classes em cada elemento dentro da grade. Não é massante ver classes repetidas por todo o seu código?

Por que tantas classes?

Suponhamos que você precisa fazer uma seção de quatro colunas do seu leiate. Como ela seria usando as frameworks disponíveis por aí? Olhe só:

<div class="row">
  <div class="sua-classe col-xs-12 col-md-3 col-sm-3 col-lg-3">
    <!-- Seu conteúdo fica aqui -->
  </div>
  <div class="sua-classe col-xs-12 col-md-3 col-sm-3 col-lg-3">
    <!-- Seu conteúdo fica aqui -->
  </div>
  <div class="sua-classe col-xs-12 col-md-3 col-sm-3 col-lg-3">
    <!-- Seu conteúdo fica aqui -->
  </div>
  <div class="sua-classe col-xs-12 col-md-3 col-sm-3 col-lg-3">
    <!-- Seu conteúdo fica aqui -->
  </div>
</div>

Estes div’s estão com muitas classes, não?

E se você pudesse escrever o mesmo código como no exemplo abaixo?

<div class="four columns one-phone">
  <div class="sua-classe">
    <!-- Seu conteúdo fica aqui -->
  </div>
  <div class="sua-classe">
    <!-- Seu conteúdo fica aqui -->
  </div>
  <div class="sua-classe">
    <!-- Seu conteúdo fica aqui -->
  </div>
  <div class="sua-classe">
    <!-- Seu conteúdo fica aqui -->
  </div>
</div>

Bem melhor, hein? É isto que esta grade faz.

Então eu vou ter que parar de usar minha framework favorita?

Ehh, não… Você pode usá-la com qualquer framework que você ja usa. Ela só funciona se você usar a classe grade no elemento pai. Ela é discreta.

Assim:

<div class="grade">
  <!-- Seu conteúdo fica aqui -->
</div>

Navegadores

Qualquer navegador moderno com suporte ao Flexbox poder utilizar esta grade.

11*
12+
9+
28+
29+
12.1+

* Alguns pequenos problemas podem ocorrer, já que este navegador usa tecnologia antiga.

Colunas

Defina um número de colunas somente uma vez, não em cada elemento.

Colunas automáticas

Cria colunas automaticamente, de acordo com o número de elementos.

Coluna 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Coluna 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Coluna 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

<div class="columns">
  <div class="sua-classe">
    <strong>Coluna 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
</div>

Colunas fixas

Fixa o número de colunas. Pode-se usar [número]-[query] para especificar um número diferente em outra resolução.

Coluna 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Coluna 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Coluna 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

<div class="columns three one-phone">
  <div class="sua-classe">
    <strong>Coluna 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
</div>

Colunas esticadas

No caso de suas colunas não derem um número exato, ou faltarem algumas para preencher o seu layout, use esta classe para esticar as colunas restantes e cobrir os espaços.

Coluna 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Coluna 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Coluna 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

Coluna 04

A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?

Coluna 05

Fuga dolorum distinctio voluptatem nesciunt distinctio nam.

Coluna 06

Nam, quaerat blanditiis hic consequatur, libero non!

<div class="four three-tablet two-phone stretch columns">
  <div class="content">
    <strong>Coluna 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="content">
    <strong>Coluna 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="content">
    <strong>Coluna 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
  <div class="content">
    <strong>Coluna 04</strong>
    <p>A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?</p>
  </div>
  <div class="content">
    <strong>Coluna 05</strong>
    <p>Fuga dolorum distinctio voluptatem nesciunt distinctio nam.</p>
  </div>
  <div class="content">
    <strong>Coluna 06</strong>
    <p>Nam, quaerat blanditiis hic consequatur, libero non!</p>
  </div>
</div>

Justificar colunas

Justifique as colunas para usar todo o espaço disponível na linha.

Column 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Coluna 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Coluna 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

Coluna 04

A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?

Coluna 05

Fuga dolorum distinctio voluptatem nesciunt distinctio nam.

Coluna 06

Nam, quaerat blanditiis hic consequatur, libero non!

<div class="four three-tablet two-phone justify columns">
  <div class="content">
    <strong>Coluna 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="content">
    <strong>Coluna 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="content">
    <strong>Coluna 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
  <div class="content">
    <strong>Coluna 04</strong>
    <p>A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?</p>
  </div>
  <div class="content">
    <strong>Coluna 05</strong>
    <p>Fuga dolorum distinctio voluptatem nesciunt distinctio nam.</p>
  </div>
  <div class="content">
    <strong>Coluna 06</strong>
    <p>Nam, quaerat blanditiis hic consequatur, libero non!</p>
  </div>
</div>

Distribuir colunas

Distribua colunas uniformemente na linha.

Coluna 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Coluna 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Coluna 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

Coluna 04

A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?

Coluna 05

Fuga dolorum distinctio voluptatem nesciunt distinctio nam.

Coluna 06

Nam, quaerat blanditiis hic consequatur, libero non!

<div class="four three-tablet two-phone distribute columns">
  [seu html]
</div>

Sem margem

Algumas vezes, quanto mais perto, melhor.

Coluna 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Coluna 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Coluna 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

Coluna 04

A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?

Coluna 05

Fuga dolorum distinctio voluptatem nesciunt distinctio nam.

Coluna 06

Nam, quaerat blanditiis hic consequatur, libero non!

<div class="four three-tablet two-phone stretch columns no-gutter">
  <div class="sua-classe">
    <strong>Coluna 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 04</strong>
    <p>A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 05</strong>
    <p>Fuga dolorum distinctio voluptatem nesciunt distinctio nam.</p>
  </div>
  <div class="sua-classe">
    <strong>Coluna 06</strong>
    <p>Nam, quaerat blanditiis hic consequatur, libero non!</p>
  </div>
</div>

Linhas

Linhas automáticas

Cria linhas automaticamente, de acordo com o número de elementos.

Linha 01
Linha 02
Linha 03
Linha 01
Linha 02
Linha 01
  <div class="columns three" style="height: 40vh">
    <div class="content lines">
      <div><strong>Linha 01</strong></div>
      <div><strong>Linha 02</strong></div>
      <div><strong>Linha 03</strong></div>
    </div>
    <div class="content lines">
      <div><strong>Linha 01</strong></div>
      <div><strong>Linha 02</strong></div>
    </div>
    <div class="content lines">
      <div><strong>Linha 01</strong></div>
    </div>
  </div>

Grade

Use a classes somente onde você precisa delas.

Divisão

quarter
quarter
  <div class="columns no-gutter">
    <div class="item quarter">quarter</div>
    <div class="item"></div>
    <div class="item quarter">quarter</div>
  </div>
half
  <div class="columns no-gutter">
    <div class="item"></div>
    <div class="item half">half</div>
    <div class="item"></div>
  </div>
seventh
  <div class="columns no-gutter">
    <div class="item seventh">seventh</div>
    <div class="item"></div>
  </div>
eighth
half
eleventh
  <div class="columns stretch no-gutter">
    <div class="item eighth">eighth</div>
    <div class="item "></div>
    <div class="item half">half</div>
    <div class="item eleventh">eleventh</div>
  </div>

Multiply

ten-times
eleventh
  <div class="columns stretch no-gutter">
    <div class="item"></div>
    <div class="item ten-times">ten-times</div>
    <div class="item"></div>
    <div class="item eleventh">eleventh</div>
  </div>
three-times
  <div class="columns no-gutter">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item three-times">three-times</div>
  </div>

Reordenação

Use a class only where you need it.

1
2
3
4
5
6
7
  <div class="columns no-gutter">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item first first-phone">7</div>
  </div>
1
2
3
4
5
6
7
  <div class="columns no-gutter">
    <div class="item last last-phone">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
  </div>

Grade aninhada

Vários níveis permitidos.

  <div class="columns no-gutter">
    <div class="item">
      <div class="columns no-gutter">
        <div class="item quarter"></div>
        <div class="item"></div>
      </div>
    </div>
    <div class="item"></div>
    <div class="item half">
      <div class="columns no-gutter">
        <div class="item"></div>
        <div class="item half"></div>
        <div class="item"></div>
      </div>
    </div>
  </div>

Posicionamento

No topo

Esta caixa tem a classe to-top.

Centro

Este container tem as classes center all.

Abaixo

Esta caixa tem a classe to-bottom. 
<div class="position-demo center all block columns">
  <div class="stuff to-top border text-center">
    <h4>No topo</h4>
    <small>Esta caixa tem a classe <code>to-top</code>.</small>
  </div>
  <div class="stuff border text-center">
    <h4>Centro</h4>
    <small>Este container tem as classes <code>center all</code>.</small>
  </div>
  <div class="stuff to-bottom border text-center">
    <h4>Abaixo</h4>
    <small>Esta caixa tem a classe <code>to-bottom</code>.</small>
  </div>
</div>


À esquerda

Esta caixa tem a classe to-left.

À direita

Esta caixa tem a classe to-right. 
<div class="position-demo center all block columns">
  <div class="stuff to-left border  quarter text-center">
    <h4>À esquerda</h4>
    <small>Esta caixa tem a classe <code>to-left</code>.</small>
  </div>
  <div class="stuff to-right border quarter text-center">
    <h4>À direita</h4>
    <small>Esta caixa tem a classe <code>to-right</code>.</small>
  </div>
</div>

Visibilidade

Mostre e esconda com classe. Literalmente.

Visível em smartphones

Visível em tablets

Visível em desktop

Escondido em smartphones

Escondido em tablets

Escondido em desktops 

  <div class="visible-phone">
    <h1>
      <i class="icon-mobile"></i>
    </h1>
    <p class="text-center">Visível em smartphones</p>
  </div>
  <div class="visible-tablet">
    <h1>
      <i class="icon-tablet"></i>
    </h1>
    <p class="text-center">Visível em tablets</p>
  </div>
  <div class="visible-desktop">
    <h1>
      <i class="icon-display"></i>
    </h1>
    <p class="text-center">Visível em desktop</p>
  </div>
  
  <p class="hidden-phone">
    <i class="icon-mobile"></i>
    <small>Escondido em smartphones</small>
  </p>
  <p class="hidden-tablet">
    <i class="icon-tablet"></i>
    <small>Escondido em tablets</small>
  </p>
  <p class="hidden-desktop">
    <i class="icon-display"></i>
    <small>Escondido em desktops</small>
  </p>

Masonry

Mostre suas imagens em colunas, sem qualquer javascript.

Image
Image
Image
Image
Image
Image
Image
Image 
<div class="mason three three-tablet two-phone">
  [seu html aqui]
</div>

Embeds

Cole o seu código, diga a proporção e boom... Funciona!

  <div class="embed [widescreen | sd | phone | cinema-wide | square]">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/KJoP0dJyToo" frameborder="0"
      allowfullscreen></iframe>
  </div>
Widescreen (16:9)
SD (4:3)
Phone (9:16)
Cinema (2:35/1)
Square (1:1)

Isto é tudo, pessoal!

Aliás, gostou do índice ao lado? Se quiser saber mais sobre ele, clique aqui!