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.

• Flexbox Froggy
• CSS Grid Garden

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

• Flexbox Grid - http://flexboxgrid.com/
• Bootstrap Grid - https://getbootstrap.com/docs/4.0/layout/grid/
• Bulma - https://bulma.io/
• Waffle Grid - https://lucasgruwez.github.io/waffle-grid
• Basscss - https://basscss.com/
• Pure - https://purecss.io/grids/
• Milligram - https://milligram.io/grids.html
• GRD - https://github.com/1000ch/grd
• Gridlex - https://github.com/devlint/gridlex
• Gridly - https://github.com/IonicaBizau/gridly
• Blueprint CSS - https://blueprintcss.dev/
• Structure - https://github.com/kenwheeler/structure
• Picnic CSS - https://github.com/franciscop/picnic

CSS Grid

• CSS grid 12 column layout - https://github.com/erikmonjas/css-grid-12-column-layout
• Griddy.css - https://github.com/balapa/griddy.css

Outros sistemas

• Semantic UI - https://semantic-ui.com/collections/grid.html
• csswizardry-grids - https://github.com/csswizardry/csswizardry-grids
• Jeet Grid - https://github.com/mojotech/jeet
• Lost Grid - https://github.com/peterramsing/lost
• Toast - https://github.com/daneden/Toast
• Neat - https://github.com/thoughtbot/neat
• Msdotcom/WinJS Grid Framework - https://github.com/winjs/grid/
• Skeleton - https://github.com/dhg/Skeleton
• Crow - https://github.com/kkortes/crow
• Simple Grid - https://github.com/zachacole/Simple-Grid
• Pills - http://arkpod.in/pills/
• Spacegrid - https://github.com/JonathanSpeek/spacegrid

Angular, React e Vue

• Angular UI Grid - http://ui-grid.info/
• React Material-UI Grid - https://material-ui.com/components/grid/
• React Grid Layout - https://github.com/STRML/react-grid-layout
• Rebass Grid - https://rebassjs.org/grid/

JavaScript

• Muuri - https://github.com/haltu/muuri
• Masonry - https://github.com/desandro/masonry

Design/UX/UI

• KK UI Store's - Grid System Library - https://grid.kkuistore.com/

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.

• CSS Grid Library

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.