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.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay