Criando Grids Responsivas

Criando Grids responsivas com CSS

É muito mais fácil do que parece. Sério. É muito fácil, na verdade.

• How to build a responsive grid system
• Designing grids
• Moving from HTML Grid Systems to CSS Grid Systems

Sobre CSS for CSS grid system

Em vez de escrever algo como:

<!-- HTML for CSS grid systems -->
<div class="row">
  <div class="col-md-4"></div>  
  <div class="col-md-4"></div>  
  <div class="col-md-4"></div>  
</div>

<!-- CSS for CSS grid systems -->
<div class="l-guest-article">
  <div class="l-guest"> <!-- Guest profile --></div>
  <div class="l-main"><!-- main article--></div>
  <div class="l-sidebar"><!-- sidebar widgets--></div>
</div>

Dá um pouco mais de trabalho, mas deixa a manutenção possivelmente mais fácil.

Pode-se escrever algo como

Antes de por a mão na massa

1. Definir tamanho máximo do layout.
2. Definir quantidade de colunas. De preferência em multiplos de 3 e 4. 12 Colunas dão uma excelente flexibilidade mas nem sempre é necessário isso tudo.
3. Calcular o gutter. Definir se ele será fixo(px) ou fluido (%)

Passo a Passo

1. Escolha uma spec (flexbox, float, inline-block)
2. Use box-sizing: border-box
3. Crie um container para a Grid.
4. Calcule o tamanho da coluna
5. Determine a posição do espaço ("gutter")
6. Crie uma Grid para debbug
7. Faça variações no layout
8. Faça seu layout ser responsivo.

1. Escolha um método (flexbox, float, inline-block)

Nesse exemplo, a Grid será criada com float.

2. Use box-sizing: border-box

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

3. Crie um container para a Grid.

/* melhor utilizar em ou rem, não px */
.l-wrap {
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}

4. Calcule o tamanho da coluna

O HTML da Grid será o seguinte:

<div class="l-wrap">
  <div class="three-col-grid">
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
  </div>
</div>

• Colunas são criadas com width.
• Gutter é criado com margin e/ou padding.

Então, a largura da coluna é igual a largura do container dividida pelo número de colunas que se quer.

Como queremos 3 colunas, fica: 1140px / 3 = 380px por coluna.

O CSS então fica:

.three-col-grid .grid-item {
  width: 380px;
  float: left;
}

Porém utilizar px torna as colunas não responsivas. Elas vão quebrar a linha, não se redimensionar de acordo com o tamanho da viewport. Por isso, vamos utilizar %.

/* 100% / 3 = 33.33333% */
.three-col-grid .grid-item {
  width: 33.33333%;
  float: left;
}

Como estamos utilizando float, é preciso usar um clearfix para que o elemento pai não entre em colapso.

.three-col-grid:after {
  display: table;
  clear: both;
  content: '';
}

5. Determine a posição do espaço ("gutter")

Para fazer isso existem 4 jeitos possíveis.

1. gutter de um lado, como margin.
2. gutter de um lado, como padding.
3. gutter dividida entre os dois lados como margin.
4. gutter dividida entre os dois lados como padding.

Vamos utilizar o método 3 por ser, de longe, o mais fácil e rápido de se fazer.

Como o tamanho do gutter será de 20px, é preciso dividir esse valor para cada um dos itens, que é 20px / 2 = 10px de cada lado.

.grid-item {
  width: calc((100% - 20px * 3) / 3);
  margin-right: 10px;
  margin-left: 10px;
  float: left;
}

6.

7. Faça variações no layout (CSS for CSS)

Digamos que você tem uma grid que será usada apenas para, digamos, artigos de visitantes em seu blog.

Para isso você pode criar o seguinte markup com 2, 7 e 3 colunas, respectivamente:

<div class="l-guest-article">
  <div class="l-guest"> <!-- Guest profile --></div>
  <div class="l-main"><!-- main article--></div>
  <div class="l-sidebar"><!-- sidebar widgets--></div>
</div>

Daí é só fazer o calculo para cada coluna individualmente. Ficaria algo como:

.l-guest-article {
  @include clearfix;
  .l-guest {
    // Ahem. More readable than 16.666% :)
    width: percentage(2/12); // or calc(2 / 12 * 100);
    padding-left: 10px;
    padding-right: 10px;
    float: left;
  }

  .l-main {
    width: percentage(7/12); // or calc(7 / 12 * 100);
    padding-right: 10px;
    padding-left: 10px;
    float: left;
  }

  .l-sidebar {
    width: percentage(3/12); // or calc(3 / 12 * 100);
    padding-right: 10px;
    padding-left: 10px;
    float: left;
  }
}

O resultado você vê aqui.

// versão com código mais limpo
.grid-item {
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

.l-guest-article {
  .l-guest { width: percentage(2/12);}
  .l-main { width: percentage(7/12);}
  .l-sidebar { width: percentage(3/12); }
}

8. Faça o layout ser responsivo

Utilizando media queries, claro. Exemplo:

.l-guest-article {
  @include clearfix;
  .l-guest {
    @media (min-width: 700px) {
      width: percentage(4/12);
      float: left;
    }

    @media (min-width: 1200px) {
      width: percentage(2/12);
    }
  }
  .l-main {
    margin-top: 20px;
    @media (min-width: 700px) {
      width: percentage(8/12);
      margin-top: 0;
      float: left;
    }
    @media (min-width: 1200px) {
      width: percentage(7/12);
    }
  }
  .l-sidebar {
    margin-top: 20px;
    @media (min-width: 700px) {
      width: percentage(8/12);
      float: right;
    }
    @media (min-width: 1200px) {
      width: percentage(3/12);
      margin-top: 0;
    }
  }
}