Grid CSS

Grids são um sistema de regras para definir um número de colunas disponíveis nos seus layouts para definir a largura e espaçamento dos seus elementos de acordo com o tamanho padrão e espaçamento entre uma coluna e outra. Você pode utilizar qualquer tipo de grid, de 12 ou 16 colunas, de larguras fixas ou relativas, com espaçamento entre colunas ou não.

Diversas implementações e frameworks estão disponíveis como, por exemplo, o clássico 960.gs (http://960.gs/), Twitter Bootstrap ou o Foundation, mas você pode criar o seu próprio grid para os seus projetos.

Trabalharemos o seguinte grid como exemplo: 9 colunas de 50px cada, com 10px de margens laterais. Podemos definir que a coluna principal de conteúdo irá ocupar o espaço de 6 colunas do grid, enquanto a barra lateral ocupará 3 colunas.

<article class=’column six-columns’>

<!– Conteúdo principal… –>

</article>

<aside class=’column three-columns’>

<!– links de navegação –>

</aside>

As definições de classes para a quantidade de colunas que um elemento pode ocupar são as regras de largura que os seus elementos devem seguir. Neste exemplo, não podemos ter uma barra lateral que ocupe 200px ou espaçar seções adjacentes em mais do que 20px. Tais padrões de tamanho e espaçamento podem economizar muito trabalho na definição dos layouts e na escrita do seu CSS.

Antes de abraçar o uso de grids como uma solução perfeita para os seus problemas, não deixe se atentar a pontos importantes ao colocar a mão na massa: o seu grid que deve se adequar ao seu conteúdo, e não o contrário. E é muito fácil de se complicar definindo um número maior de colunas do que o necessário – um grid de 3 ou 5 colunas pode ser o suficiente para a maioria dos seus projetos.

Distribuir um bloco de conteúdo – textos, links ou imagens – em diversas colunas ficou muito fácil. Em vez de dividir o conteúdo manualmente em elementos separados e se preocupar com a largura e espaçamento entre eles você pode simplesmente deixar esta tarefa para o navegador, com a propriedade column-count, onde você define a quantidade de colunas que o seu elemento terá, e fica a cargo do navegador distribuir o conteúdo e dimensionar cada uma, independentemente do tamanho do seu elemento.

Além disso, existem propriedades adicionais para definir novos detalhes do comportamento das suas colunas, como column-gap (espaçamento entre colunas), column-rule (a borda que dividirá as colunas) ou column-fill (a regra utilizada para distribuir o conteúdo entre as colunas). No exemplo a seguir demonstraremos quão simples é dividir um bloco de conteúdo entre colunas.

<p>

Este conteúdo será distribuído entre o número de colunas setado no CSS. A utilização deste recurso garante maior agilidade no desenvolvimento e controle na adaptação do conteúdo dentro do objeto utilizado no desenvolvimento.

</p>

p {

column-count: 3;

column-gap: 10px;

column-rule: 1px solid #666;

font-size: 0.9em;

width: 500px;

}

6

Source: scriptcase / Grid CSS

Comments

comments

Greg

Old school developer with a passion for food, bikes and a whole lot of weird things.

Leave a Reply

Your email address will not be published.