Entendendo o Grid do Bootstrap e construindo um fixo

O sistema de grid do Bootstrap é prático e versátil. Você tem 12 colunas para distribuir seu conteúdo. Isso não significa que o seu site terá o formato 12 tripas. As colunas podem assumir tamanhos de 1, 2 e até 12. É importante, mas também não essencial chegar ao total 12.

A largura das colunas é dada em proporção. Uma coluna de tamanho 1 tem a largura 1/12. Uma coluna de tamanho de 7 tem a largura de 7/12 ou 58,33..%. Se você somar 3/12 + 9/12 vai ter 100%. É possível ter um grid com 18, 24 ou N colunas.

Como a largura é dada em proporção, 8,333% é 8,333% de 100%. 100% é uma proporção de um número, esse número pode ser o seu container ou uma outra coluna – grid dentro de grid. O container fecha o conteúdo e uma coluna abre o espaço para mais 12 colunas.

Em uma coluna, independente do seu tamanho você pode colocar mais 12 colunas. O Boostrap chama isso de nested grid. Os 8,333% é referente a largura do pai, e, independente do valor, se colocar mais 11 colunas vai ter 100%.

Gutters não se aplicam nesse cálculo pela mágica da propriedade box-sizing que desconsidera padding do cálculo. Os gutters da esquerda e da direita são cancelados por row, que puxa o conteúdo para a esquerda e para a direita com o mesmo valor do gutter.

Para desenvolvedores esse sistema é fácil, sem segredo. Mas para designers e projetos precisos pode ser um grande pesadelo. O layout dos componentes precisa ser desenhado avaliando em que grid o componente se encontra. Lembre-se da proporção, 8,333% de 100% é diferente de 8,333% de 50% ou de coluna de tamanho 6.

Uma cálculo simples: 12 colunas, dentro das 12 cabem outras 12, considerando apenas o primeiro nível e pensando em combinações temos 12 x 12 ou 144 grids. Encaixar o pixel perfect é praticamente impossível e ignorar isso pode ser desastroso.

Pensando em projeto responsivo, imagens com larguras em proporção, tudo bem, basta tomar alguns cuidados e tudo caminhará bem. Mas se realmente precisar do pixel perfect é melhor desconsiderar o grid dentro de grid e assumir o grid apenas no primeiro nível ou mudar de sistema de grid.

É possível ter um grid de N colunas, e em uma área de 7 colunas ter 7 colunas, não 12. É só usar valores fixos e deixar a proporção de lado. A coluna de tamanho 1 deixa de ser 8,333% e passa a ser 85,333px para um container de 1024px.

Perfeito, agora o pixel perfect é possível e existe apenas um grid. O novo problema é a modificação de tamanho de coluna em níveis acima – passa a ser em cadeia, todos os componentes abaixo precisam ter o tamanho de suas colunas revistos e modificados.

Esses novos valores fixos precisam estar no CSS, podem ser gerados por algum gerador ou usar Javascript para fazer isso, em run-time.

Código explicado

<style id="grid"></style>
<script>

// container ou breakpoint
var wrp = 1170;

// número de colunas
var col = 24;

// largura de uma coluna
var one = wrp / col;

// regras css
var str = '';

// generate
for (var i = 1; col; col--) {
	str += '.col-' + col + '{width:'+ col * one +'px}';
}

document.getElementById('upd').innerHTML = str;

</script>

Código simplificado

<style id="grid"></style>
<script>for (var wrp = 1170, col = 24, one = wrp / col, i = 1, str = ''; col;
	str += '.col-' + col + '{width:'+ col-- * one +'px}');
document.getElementById('upd').innerHTML = str;</style>

Coloque esse código no head ou o mais próximo possível. Faltou algumas classes auxiliares, como pull-* e offset-* e variações para outros breakpoints, mas o princípio é o mesmo.

You may also like...