O sistema de grelha está disponível há séculos, dos primeiros jornais, cartazes, revistas até layouts de websites. Desde sempre replicar o que está no papel para website foi uma tarefa difícil, tabelas, floats, posições absolutas, alinhamentos e elementos dentro de elementos só para obter o resultado final.

Mesmo com frameworks e flex-box, as dificuldades foram surgindo em designs mais complexos, foi nesse momento que nós encontramos esta propriedade de css3 chamada css grid system.

O css grid é suportado pelos browsers mais utilizados e começam a surgir nos websites mais modernos.

compatibilidade css grid - browsers

Então, de forma simples, o css grid é uma propriedade que permite definir um certo número de colunas e linhas, e posicionar cada child na célula que se pretende. Muito simples, certo? Como é um sistema de 2 dimensões que permite posicionar e alinhar os elementos, torna o código html mais simples e com menos “nesting”.

flex

Enquanto flex-box e a maior parte dos frameworks, com base em flex, são uni-dimensional.

grid

O css grid é bi-dimensional, o que permite posicionar um elementos horizontalmente e verticalmente num lugar preciso.

Características
 

Tamanhos

As colunas e as linhas podem ser definidas por tamanhos fixos (ex: px) ou por tamanhos flexíveis (ex: percentagem) de forma a criar o layout desejado. O css grid também vem introduzir uma nova unidade de medida que é o fr, que significa fração. Por exemplo se definir que uma linha tem 1fr e a seguinte tem 2fr, sabemos que a segunda linha terá sempre o dobro do tamanho da primeira.
 

Posicionamento

O css grid permite posicionar um elemento num lugar preciso. Pode-se usar número de linha, nomes ou alvejar uma área da grid. A grid também detecta os elementos child e posiciona-os automaticamente numa célula disponível da grid, se esse elemento não tiver uma posição especificada.
 

Autoconsciente

O elementos que tem display: grid é autoconsciente dos childs elements diretos, se existe uma grid de 1 coluna por 1 linha, mas existem 2 childs, irá automaticamente adicionar mais uma linha automaticamente para adicionar o 2º child. Esta característica torna-se muito útil se um site for alimentado por conteúdo dinâmico.
 

Alinhamento

O css grid herdou as propriedades de alinhamento do flex, tudo pode ser alinhado dentro da célula horizontalmente e verticalmente. É possível alinhar todos os elementos juntos ou cada um em separado.
 

Sobreposição

O facto da grid ser dividida por células não significa que o conteúdo não possa sobrepor. É possível posicionar mais que um elemento na mesma célula e usar a propriedade z-index para definir a ordem destes.

quer continuar a ler?
faça o download do artigo completo.

Filipe Nascimento

2019-05-16

Critec Logo
creative
agency
critec
Olá,
Em que posso ajudar?