CSS grid: Veja como criar do zero

CSS Grid

Nenhum produto encontrado nessa seleção.

Neste tutorial, vou detalhar como criar seu próprio CSS Grid para facilitar a divisão de colunas em qualquer tamanho de tela, seja um Smartphone ou uma TV de  polegadas.

Se você desenvolve há bastante tempo, provavelmente chegou a ver várias mudanças no estilo como criamos sites. Passamos de layout de tabelas, para CSS, largura fixa para design responsivo, e outras milhares de mudanças que ocorreram ao longo dos anos (e ainda vai mudar muito).

Uma coisa que nunca muda é o sistema de grid (grade, grelha ou malha). Grid, basicamente, é um sistema que você cria para deixar o seu layout mais alinhado e consistente.

Sem que eu precise detalhar muito, apenas olhando a imagem abaixo você será capaz de absorver a ideia.

Com grid:

Com Grid

Sem grid:

Sem Grid

Isso acontece porque é um assunto voltado para o design gráfico, assunto que, se quiser entender melhor, basta acessar os links abaixo:

Agora vamos ver códigos… Oba!!!!

Como criar sua própria grid em CSS

Não tem segredo, primeiramente você deve entender o layout que vai criar (é a partir do layout que o grid vai ser criado). Eu trabalho como programador, neste caso o layout chega pra mim como imagem (PSD, JPG, Corel, até Word – acredite se quiser), minha função é entender as funções do site e escrever o código que vai fazer tudo funcionar. Portanto, antes de mais nada, saiba exatamente o que você quer fazer. 

Quando você souber como será o layout (quantas colunas, blocos e módulos, etc), arrume uma calculadora e faça as contas.

O mais complicado aqui é que vamos trabalhar com porcentagens, já que nosso layout sempre será responsivo.

Por exemplo, suponhamos que eu queira um site com largura máxima de 1000px e duas colunas, uma de 360px e outra de 640px (apenas um exemplo). Simples, veja as continhas:

  • ( 360 * 100 ) / 1000 = 36%
  • ( 640 * 100 ) / 1000 = 64%

Sei que dava para fazer de cabeça, mas só para você entender a conta (pois os valores podem ficar bem complicados dependendo do layout). Então eu já sei que posso ter uma coluna com largura de 64% e outra com 36%.

Vamos codificar e ver o que acontece:

HTML:

<div class="pagina">
  <div class="conteudo"></div>
  <div class="lateral"></div>
</div>

CSS:

*, *:after, *:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  width: 100%;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
.pagina {
  max-width: 1000px;
  margin: 30px auto;
}
.conteudo {
  float: left;
  /* Apenas para nosso exemplo */
  background: yellow;
  width: 64%;
}
.lateral {
  float: left;
  width: 36%;
  /* Apenas para nosso exemplo */
  background: purple;
}
/* Apenas para nosso exemplo */
.conteudo, .lateral {
  height: 300px;
}

E já temos nosso resultado prontinho.

Agora, imagine aqueles layouts onde o designer quer 30px de largura entre os elementos, como fazer?

Simples também, vamos modificar um pouco nosso HTML, veja:

<div class="pagina clearfix">
  <div class="conteudo">
    <div class="conteudo-interno"></div>
  </div>
  <div class="lateral">
    <div class="lateral-interno"></div>
  </div>
</div>

Agora estilize apenas o conteúdo interno, assim, você não quebra a estrutura criada anteriormente.

*, *:after, *:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  width: 100%;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
.pagina {
  max-width: 1000px;
  margin: 30px auto;
}
.conteudo {
  float: left;
  /* Apenas para nosso exemplo */

  width: 64%;
}
.lateral {
  float: left;
  width: 36%;
}
.conteudo-interno {
  background: yellow; 
  margin: 15px;
}
.lateral-interno {
  margin: 15px;
  /* Apenas para nosso exemplo */
  background: purple;
}
/* Apenas para nosso exemplo */
.conteudo-interno, .lateral-interno {
  height: 300px;
}

Perceba que agora temos uma margem de "15px" de cada lado dos blocos, ou seja, 15+15 = 30px de espaço.

Alguns (se não todos) designers reclamam por diferença de um único pixel, perceba que teremos diferença de "15px" em cada uma das laterais da página. Isso acontece por que não existe mais conteúdo para somar as margens.

Para resolver isso, você pode adicionar "padding" de 15px no próprio elemento que envolve as colunas, veja:

*, *:after, *:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  width: 100%;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
.pagina {
  max-width: 1000px;
  padding: 15px;
  margin: 0 auto;
}
.conteudo {
  float: left;
  /* Apenas para nosso exemplo */

  width: 64%;
}
.lateral {
  float: left;
  width: 36%;
}
.conteudo-interno {
  background: yellow; 
  margin: 15px;
}
.lateral-interno {
  margin: 15px;
  /* Apenas para nosso exemplo */
  background: purple;
}
/* Apenas para nosso exemplo */
.conteudo-interno, .lateral-interno {
  height: 300px;
}

Veja aqui o resultado.

Agora vamos ver um sistema de css grid criado com a mesma ideia.

Sistema de Grid Tutsup

Este é um sisteminha de grid criado com os cálculos indicados acima:

HTML:

<div class="page clearfix">

  <!-- 12 colunas -->
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  
  <!-- 6 colunas -->
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 3 colunas -->
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  
  <!-- 2 colunas (Uma muito fina, outra bem larga) --> 
  <div class="cols cols-6">
    <div class="content">2</div>
  </div>
  <div class="cols cols-6-5x">
    <div class="content">6 &times; 5</div>
  </div>
  
  <!-- 2 colunas (Uma muito fina, outra bem larga) --> 
  <div class="cols cols-6-5x">
    <div class="content">6 &times; 5</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 2 colunas iguais --> 
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  
  <!-- 2 colunas (Uma larga, outra mais fina) --> 
  <div class="cols cols-3-2x">
    <div class="content">3 &times; 2</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  
  <!-- 2 colunas (Uma larga, outra mais fina) -->   
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-3-2x">
    <div class="content">3 &times; 2</div>
  </div>
  
  <!-- 3 colunas (duas finas nas pontas e uma mais larga no meio) -->   
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-3-2x">
    <div class="content">3 &times; 2</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 3 colunas (uma com cada largura) -->
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 3 colunas (uma com cada largura) -->
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  
  <!-- 3 colunas (uma com cada largura) -->
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  
  <!-- 3 colunas (uma com cada largura) -->
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 4 colunas -->
   <div class="cols cols-12">
    <div class="content">12</div>
  </div>
     <div class="cols cols-6">
    <div class="content">6</div>
  </div>
       <div class="cols cols-3">
    <div class="content">3</div>
  </div>
        <div class="cols cols-12-5x">
    <div class="content">12 &times 5</div>
  </div>
  
</div>  <!--.page -->

CSS:

*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: sans-serif;
	font-size: 12px;
	color: #fff;
}
.page {
	max-width: 100%;
	padding: 15px;
	background: #333;
	margin: 0 auto;
}
.clearfix:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	line-height: 0;
}
.cols {
	float: left;
}
.cols-12 {
	width: 8.33%;
}
.cols-12-5x {
	width: 41.65%;
}
.cols-6 {
	width: 16.66%;
}

.cols-6-3x {
	width: 50%;
}
.cols-6-5x {
	width: 83.3%;
}

.cols-3 {
	width: 33.33%;
}
.cols-3-2x {
	width: 66.64%;
}

.content {
	background: #3facd6;
	padding: 0;
	margin: 15px;
	padding: 15px;
}

Veja o resultado aqui.

Observação: Lembre-se de aplicar as Media queries.

Download

Caso queira baixar os arquivos da CSS Grid criada nesse tutorial, mais um PSD (Photoshop) pronto, basta clicar no link abaixo:

Espero que ajude no seu próximo desenvolvimento.

/4 Comentários/por