DEV Community

Cover image for Grid de 8 pontos uma técnica que torna seu projeto escalável
Iuri Silva
Iuri Silva

Posted on

3

Grid de 8 pontos uma técnica que torna seu projeto escalável

Se você é um designer ou desenvolvedor, talvez já tenha ouvido o termo sistema de grid. Neste artigo, discutirei sobre o uso dos sistemas de grid de 8 pontos. Porque o espaçamento com 8 pontos ajuda o designer e o desenvolvedor a manter um projeto consistente e escalável.

O que é Grid de 8 pontos

O grid de 8 pontos é uma técnica que tem sido amplamente utilizada no mundo do design e da programação nos últimos anos. O grid de 8 pontos é quando usamos múltiplos de 8 para definir tanto o espaçamento, quanto o tamanho dos elementos da página em que estamos construindo.

A utilização de números como 8 para dimensionar e espaçar elementos torna o dimensionamento para uma ampla variedade de dispositivos. Além disso, a maioria dos tamanhos de tela populares é divisível por 8, o que facilita o ajuste. O princípio do grid de 8 pontos é usar múltiplos de 8 para layout, dimensões, preenchimento e margem dos elementos.

Grid de 8 pontos na prática

Utilizar o grid de 8 pontos em espaçamentos nos projetos é tão simples quanto parece. Simplesmente vai fazer com que a distância de um elemento para o outro seja múltipla de 8.

Geralmente usamos uma certa distância para espaçamento entre elementos que fazem parte do mesmo conteúdo e o dobro desse espaçamento para separar novos conteúdos. Veja no exemplo abaixo:

Image description

Conclusão

O grid de 8 pontos é uma técnica poderosa que pode ajudar designers e desenvolvedores a criar projetos consistentes e organizados. Utilizando grid de 8 pontos, é fácil manter a consistência no design, garantir que os elementos estejam equilibrados entre sí. Em resumo, a utilização do grid de 8 pontos é essencial para qualquer projeto de design ou desenvolvimento que exija organização e harmonia.

Billboard image

Monitor more than uptime.

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay