Os grids são utilizados para guiar a construção de páginas por meio de linhas e colunas que acomodam seu conteúdo. Um uso consistente do Grid fornece a base para uma página harmônica com elementos bem posicionados na tela.
Nos exemplos a seguir, vamos mostrar um grid com 12 colunas e tamanho do gutter (espaço entre as colunas) variável.
<aside> 👉 👩💻 Para o designer, utilizar um layout grid facilita na hora de construir a interface e definir o tamanho dos componentes criando um alinhamento consistente e fluido.
</aside>
<aside> 👉 🦸 Para os devs, o layout grid garante que a interface desenvolvida será mais fiel ao protótipo e possibilita criar breakpoints para tornar o produto responsivo. YAY!
</aside>