UI Grid - Sistemas e bibliotecas

Nos últimos 8 anos, os sistemas de grid CSS vem ganhando destaque pela atenção que o layout responsivo tem recebido. E estou estimando esse tempo, com base na data de lançamento do twitter boostrap (19 de agosto de 2011). Essa seria a minha referência, em relação ao início forte de discussões sobre boas práticas para layout responsivo, frameworks e bibliotecas para esse fim.

Sistema de grid

O sistema de grid é uma estrutura que permite o alinhamento de elementos da página com base em colunas e linhas sequenciadas.

O formato com 12 colunas tem sido o mais utilizado, por causa da flexibilidade proporcionada e por ser capaz de dividir o layout uniformemente. Na divisão por 2, 3 e 4, temos uma serie de modulações disponíveis (2x6 , 3x4) e várias outras combinações.

O número de colunas pode variar dependendo do projeto. Quanto maior o número de colunas, (por exemplo, 16 ou 24) maior a quantidade de possibilidades para divisão.

960 Grid System, considerado o rei do grid por muitos anos, tem a seguinte estrutura:

  • Largura total de 960px.
  • 12 colunas
    • Largura de 60px em cada coluna.
    • Cada coluna tem 10px de margem esquerda e direita. Sendo 20px de espaço entre as colunas.
    • A área total do conteúdo é de 940px.
  • 16 colunas
    • largura de 40px em cada coluna.
    • Cada coluna tem 10px de margem esquerda e direita. Sendo 20px de espaço entre as colunas.
    • A área total do conteúdo é de 940px.
  • 24 colunas
    • largura de 30px em cada coluna.
    • Cada coluna tem 5px de margem esquerda e direita. Sendo 10px de espaço entre as colunas.
    • A área total do conteúdo é de 950px.

Uma das principais razões para a popularidade do 960 Grid com os designers é a sua flexibilidade. Os designers podem usar uma ampla gama de colunas, com o número máximo de 24.

Funcionou muito bem no começo e ainda funciona até hoje, porque a maioria dos projetos tem o tamanho de fonte definido em 12px. De uns anos para cá, que a maioria dos layouts estão sendo definidos com tamanho de fonte de 13px ou superior.

Como o tamanho da fonte aumentou, é necessário aumentar a área de conteúdo e ajustar o espaço entre as colunas. Com a evolução das boas práticas na experiência do usuário e uma variedade de novos dispositivos, o sistema de grid foi ganhando uma infinidade de variações. Ex: O Bootstrap, acima de 960px, usa a largura de 1140px para área de conteúdo no tamanho wide.

Sendo encontrado com facilidade na internet, os sistemas mais comuns. Lembrando que o projeto terá uma necessidade e o sistema poderá ser livremente customizado.

Levando o layout CSS ao próximo nível

Quem já trabalha com layout CSS, há muitos anos, já deve ter visto muito float: *, display: table, display: inline-block, para montar uma grade na estrutura ou em um simples menu. Desde 2015, o suporte dos navegadores mais relevantes para o Flexbox, tem sido excelente. O CSS Grid, tem sido bem recebido pelo navegadores, desde 2017. É claro que não considero o IE, para falar de suporte as novas tecnologias, mas o suporte a esse layout que tem feito muitos desenvolvedores felizes, já passa de 90%. Agora, vamos falar mais sobre essa flexibilidade que temos no CSS.

O Flexbox, foi projetado como um modelo de layout unidimensional e método que pode oferecer distribuição de espaço entre itens numa interface e capacidade de alinhamento. Ele também pode ser usado para trabalhar elementos de forma bidimensional, mas o flexbox opera melhor quando trabalhado com os itens em apenas uma dimensão, ou seja, em coluna ou linha.

Já o CSS Grid, tem o modelo bidimensional, que controla ao mesmo tempo as colunas e linhas. Você pode indicar o ponto em que um elemento começa e acaba dentro da sua grid, o que proporciona muita flexibilidade.

CSS Grid é principalmente definido no elemento pai. No flexbox, fora o básico, a maior parte do layout é aplicado nos elementos filhos.

O intuito do artigo, não é me aprofundar muito em cada assunto sobre como montar a sua grade, e sim, apenas apresentar os sistemas e ferramentas para o mesmo. O mais importante é deixar claro que um não substitui o outro. Podem ser usado tranquilamente juntos e em próximo artigos, darei mais exemplos dessa combinação.

Abaixo podemos brincar, conhecer e praticar com Flexbox e CSS Grid.

Bibliotecas

Fiz um compilado das ferramentas que podem nos ajudar e inspirar no desenvolvimento e montagem da grade para os nossos projetos.

Pré-processadores e CSS

Flexbox

CSS Grid

Outros sistemas

Angular, React e Vue

JavaScript

Design/UX/UI

Bônus

Como bônus, deixo uma biblioteca que posibilita a utilização de 3 sistemas de grid (flexbox, CSS Grid e Flexbox Masonry Grid. Escrito em SCSS e disponível em SCSS e CSS.

Considerações finais

Montar uma grade no projeto sempre gerou dúvidas entre leigos, designers e desenvolvedores front-end. Citei o 960 GS, por ser um exemplo de que esse assunto precisou de um norte para quem não tinha muita experiência ou estipular um padrão.

A única coisa certa, é que temos uma evolução e maior suporte em relação ao assunto de layout CSS na última década. Vale o estudo na parte de elaboração do projeto, quanto ao melhor sistema que deixará o desenvolvimento do mesmo mais flexivel e de acordo com a área de interface e desenvolvimento.

Na minha opinião, antes de qualquer coisa relacionada ao desenvolvimento web, é necessário definir quais são os navegadores que o seu projeto dará suporte. Assim, diminuindo as preocupações na fase de desenvolvimento e é claro, quando o produto estiver em produção.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.