Composição
Como criar o grid
1 - Divida a área de trabalho em colunas
![](https://uploads-ssl.webflow.com/5e04e4f5ed2a2707ee5ee233/5e067b5277d741b0b03d2439_conta%20azul_composicao_passos_12%20colunas_01%402x.png)
Com base no tamanho da área de trabalho escolha o número de colunas mais adequado para a composição. Geralmente em formatos mais horizontais um grid de 12 ou 6 colunas colunas funciona melhor. Em formatos quadrados e verticais opte por 4 ou 3 colunas.
2 - Encontre o tamanho de margem
![](https://uploads-ssl.webflow.com/5e04e4f5ed2a2707ee5ee233/5e067b58be0f8255b87042a4_conta%20azul_composicao_passos_12%20colunas_02%402x.png)
Depois que as colunas foram criadas, divida a largura de uma coluna em 2 partes. Essa será a medida de margem do layout.
3 - Aplique a margem em todos os lados
![](https://uploads-ssl.webflow.com/5e04e4f5ed2a2707ee5ee233/5e067b5e77d7416d7b3d2443_conta%20azul_composicao_passos_12%20colunas_03%402x.png)
Aplique essa margem para todos os lados do layout. Em seguida ajuste as medidas das colunas considerando essas margens.
4 - Encontre o tamanho dos separadores
![](https://uploads-ssl.webflow.com/5e04e4f5ed2a2707ee5ee233/5e067b63be0f82b46f7042ae_conta%20azul_composicao_passos_12%20colunas_04%402x.png)
Depois que as margens foram criadas, divida a largura de uma coluna em 4 partes. Essa será a medida dos separadores de coluna (gutter).
5 - Aplique os separadores
![](https://uploads-ssl.webflow.com/5e04e4f5ed2a2707ee5ee233/5e067b690d37a119ff1f9fda_conta%20azul_composicao_passos_12%20colunas_05%402x.png)
Distribuia os separadores ao longo do layout. E pronto, esse será o grid de composição para você criar o material.
6 - Distribuia os elementos
![](https://uploads-ssl.webflow.com/5e04e4f5ed2a2707ee5ee233/5e067b6d77d7411d263d2452_conta%20azul_composicao_passos_12%20colunas_06%402x.png)
Escolha uma das possibilidades de composição e distribua os elementos.