Grade CSS para Designers

Como uma nova tecnologia está mudando o layout na web

Johna Paolino Blocked Desbloquear Seguir Seguindo 3 de janeiro Ilustração de Dominic Kesterton

Durante anos, os designers usaram grades para ordenar as páginas. Grids como uma ferramenta de design estão associados aos suíços que a formalizaram como uma maneira de pensar sobre o layout na década de 1940, de acordo com Beth Tondreau no livro “Essentials Layout”. Quando as pessoas começaram a projetar para a Internet, os sistemas de grade foram transportados da página impressa para a digital.

Durante esse período, o CSS (o código que controla o estilo dos elementos em seu navegador) era limitado em termos de recursos de layout. Minha colega de equipe, Natalya Shelburne , engenheira do The New York Times, equivale a tentar criar designs usando as ferramentas do Microsoft Word. Como solução para essas limitações, várias estruturas de layout foram desenvolvidas para facilitar o trabalho com o layout. Em 2011, o Twitter lançou o Bootstrap , uma das soluções de layout mais populares. O Bootstrap fez um monte de cálculos nos bastidores, para que os desenvolvedores pudessem usar código simplificado para implementar layouts em uma grade de 12 colunas.

As grades na Web não eram simplesmente diretrizes de design para layout, mas códigos reais que limitavam e executavam o posicionamento de elementos em viewports e pontos de interrupção.

Avance seis anos para o lançamento do CSS Grid no início de 2017. Essa tecnologia remove muitas das limitações que existiam no CSS até hoje. Mas o CSS Grid não é apenas uma ferramenta para desenvolvedores front-end; os designers agora podem pensar em layout da web de novas maneiras.

O CSS Grid facilita a criação de trilhas de grade usando CSS – as trilhas de grade são apenas uma maneira sofisticada de dizer colunas e linhas. A grade de 12 colunas popularizada pelo Bootstrap foi uma solução inteligente na época, mas o CSS Grid nos oferece muitas outras opções de layout.

A grade de 12 colunas pode suportar uma variedade de layouts de design, como coluna única, duas colunas e três colunas.

O CSS Grid nos permite criar rapidamente grades customizadas para nossos projetos. Isso significa que não precisamos começar com 12 colunas – podemos ter cinco ou oito.

Esse avanço tecnológico é tão importante para os designers entenderem, porque significa que podemos pensar na grade certa para as demandas de nosso conteúdo.

Podemos criar grades que controlam melhor a colocação de elementos tanto na vertical como na horizontal. Tudo isso traz abordagens clássicas de design gráfico e direção de arte para o design da web.

Texto original em inglês.