Grid básico padrão com 12 colunas

O sistema de grids da waStandards utiliza um padrão responsivo de 12 colunas, contidos em um recipiente 940px de largura. Com o arquivo responsive.css incluído na página, a grade se adapta em até 1170px de largura, dependendo da janela do navegador do usuário.

HTML do grid básico

Atenção! Primeiramente, toda a estrutura de grids listada abaixo deve ser instanciada a partir de um elemento pai, instanciado com a classe CSS container. Veja mais em Layouts

Para um simples layout de duas colunas, crie um .row e adicione um número apropriado de .span*. Como o grid é de 12 colunas, cada .span* tem um número que somam 12 colunas, e deve sempre ter 12 colunas para cada linha (ou o número de colunas do pai).

<div class="container">
    <div class="row">
        <div class="span4">...</div>
        <div class="span8">...</div>
    </div>
</div>

No exemplo dado, nós temos .span4 e .span8, fazendo 12 o total de colunas de uma linha completa

Offset do grid básico

Mova colunas para a direita usando as classes .offset*. Cada classe aumenta a margem esquerda de uma coluna por toda colunagem. Por exemplo, .offset4 move .span4 por 4 colunas.

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class="container">
    <div class="row">
        <div class="span4">...</div>
        <div class="span3 offset2">...</div>
    </div>
    <!--Podem haver quantas linhas forem necessárias dentro de um único container-->
    <div class="row">
        <div class="span4">...</div>
        <div class="span3 offset2">...</div>
    </div>
</div>

Aninhando colunas

Para aninhar seu conteúdo com o grid padrão, adicione um novo .row e escolha um .span* em * colunas com uma coluna existente de .span*. Linhas aninhadas devem incluir um set de colunas que adicionam ao número de colunas do seu pai

Coluna nível 1

Nível 2

<div class="container">
    <div class="row">
        <div class="span9">
            Coluna nível 1
            <div class="row">
                <div class="span6">Nível 2</div>
                <div class="span3">Nível 2</div>
            </div>
        </div>
    </div>
</div>

Grid fluido

O sistema de grid fluido usa porcentagem ao invés de pixels para colunagem nas larguras. Ele tem as mesmas funcionalidades responsivas como nosso grid fixo, assegurando as proporções adequadas para tela chave nas resoluções e dispositivos

HTML básico do grid fluido

Para tornar qualquer linha "fluid" mudando .row para .row-fluid.

Para o container inteiro se tornar fluido, adicione "fluid" na classe container também.

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4">...</div>
        <div class="span8">...</div>
    </div>
</div>

Offset do grid fluido

Opera da mesma forma como o grid fixo com um offset: adicione .offset* para qualquer coluna para dar um offset para qualquer coluna

4 offset 4

3 offset 3

6 offset 6

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

Teste de fluido

Grids fluidos utilizam aninhamento diferente: cada nível animnhado de coluna deve adicionar mais de 12 colunas. Isto é por que o grid fluido usa percentagens, não pixels, para atribuir as larguras

Fluid 12

Fluid 6

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

Layouts

Os layouts são montados a partir de um elemento <div class="container">. São responsáveis para gerar a área de contenção do layout.

Layout fixo

Provê uma largura fixa (e opcionalmente responsiva) com qualquer <div class="container"> requerido.

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

Layout fluido

Criar uma página de duas colunas fluida com <div class="container-fluid">—ótimo para aplicação e documentação

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--conteúdo da lateral-->
    </div>
    <div class="span10">
      <!--conteúdo do corpo-->
    </div>
  </div>
</div>