Tutorial: Criando um Grid de Colunas com Sass

grid colunas
grid colunas

Objetivo:

Criar um grid de colunas verticais com duas cores no background, que calculam automaticamente a quantidade que precisa para encaixar na tela do usuário.

HTML

Nosso HTML será básico e terá somente uma class dentro da tag

<header class="header"><!-- empty --></header>

CSS

Para o CSS iremos utilizar o pre-compilador Sass, então estou levando em consideração que você já tenha instalado em sua maquina e funcionando.

Primeiro vamos resetar margin, padding, e fazer com o box leve em consideração suas bordas,paddings,margins e definir um background geral.

*,
*:after
*:before{
  margin: 0; padding: 0;

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  background: #f2f2f2;
}

Agora vamos criar um cor padrão para o header.

$header-color: #f99;

Vou descrever o código abaixo para exemplificar o tutorial, comentando dentro do próprio código.

header.header{
  background-color: $header-color; //define a cor do background
  height: 450px; //define a altura do header
		
  //definindo o linear-gradient de cores sempre pra direita
  background-image: linear-gradient(to right, $header-color 50%, darken($header-color,10%) 50%);
  background-image: -webkit-linear-gradient(0deg, $header-color 50%, darken($header-color,10%) 50%);
  background-image: -moz-linear-gradient(0deg, $header-color 50%, darken($header-color,10%) 50%);
 
  //largura de cada coluna e altura a mesma
  //aqui que a mágica acontece.
  background-size: 100px 100%;

  //complemento para melhorar aparência, uma sombra interna de baixo pra cima.
  box-shadow: inset -0px -5px 10px 1px RGBA(0,0,0,.3);
  -webkit-box-shadow: inset -0px -5px 10px 1px RGBA(0,0,0,.3);
  -moz-box-shadow: inset -0px -5px 10px 1px RGBA(0,0,0,.3);
}

Agora vou explicar a parte principal do código, logo que temos propriedades que não necessitam de explicação.

Definimos um linear-gradient com duas cores, 50% para cada cor. Este 50% é para que a cor fique sólida, se retirar-mos os 50% de cada cor ela ficará com fade entre as cores.

  background-image: linear-gradient(to right, $header-color 50%, darken($header-color,10%) 50%);

E é neste código que a mágica acontece, no caso abaixo, estou trabalhando com colunas de 100px, porém ao alterar o valor, a largura das colunas vão se ajustar, fazendo nosso efeito de grid.

  background-size: 100px 100%;

Simples né?
Utilizando um pouco de CSS3, Sass fizemos um lindo efeito de grid de colunas pelo background.
Agora fica ao seu gosto como deixar as colunas, podendo ficar 90deg,45deg, to bottom, to top, alterar as cores, modificar a largura, altura e etc..

Sem codepen neste tutorial 😦

No outro faço no codepen, abraços.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s