Grid

Veja como utilizar

Para utilizar o sistema de grid é necessário acrescentar um elemento pai com a classe grid-container e adicionar aos elementos filhos, as classes grid-numero* ou grid-xs-numero* ou grid-s-numero* ou grid-m-numero* ou grid-l-numero*.

O número* varia de 1 até 12, pois foi desenvolvido para comportar até 12 colunas.

O valor do grid-numero* (default) corresponde à tela com tamanho até 560px;
O valor do grid-xs-numero* (extra-small) corresponde à tela com tamanho mínimo de 560px;
O valor do grid-s-numero* (small) corresponde à tela com tamanho mínimo de 768px;
O valor do grid-m-numero* (medium) corresponde à tela com tamanho mínimo de 992px;
O valor do grid-l-numero* (large) corresponde à tela com tamanho mínimo de 1200px;

Para acrescentar uma margem de offset, é necessário adicionar as classes grid-offset-numero* ou grid-xs-offset-numero* ou grid-s-offset-numero* ou grid-m-offset-numero* ou grid-l-offset-numero* nos elementos filhos.

Exemplo com 12 colunas padrão, 4 em large, 3 em medium e 2 em extra-small

(grid-12) (grid-xs-6) (grid-m-4) (grid-l-4)

(grid-12) (grid-xs-6) (grid-m-12) (grid-l-4)

Exemplo com 2 colunas padrão, 7 e 5 em small e offset-9 em medium

(grid-6) (grid-s-7)

(grid-6) (grid-s-5) (grid-m-offset-9)

Exemplo com offset-6 padrão

(grid-offset-6)

Exemplo com 2 colunas padrão, 2 em large e offset-8 em large

(grid-6) (grid-l-2)

(grid-6) (grid-l-offset-8)

Exemplo com 12 colunas padrão, 3 em medium e offset-6 na coluna do meio (nesssa coluna foi adicionado outro grid)

(grid-12) (grid-m-4)

(grid-12) (grid-l-offset-6)

(grid-12) (grid-m-4)

Alinhamento do Grid

Veja como utilizar

Por padrão, os itens do grid vem configurados com alinhamento ao topo, no entanto é possível alterar esse comportamento adicionando classes no elemento pai grid-container:

Para alinhar os itens ao topo, adicione a classe grid-align-start
Para alinhar os itens ao centro, adicione a classe grid-align-center
Para alinhar os itens ao rodapé, adicione a classe grid-align-end

Cada item pode também ser alinhado individualmente no eixo y, adicionando classes aos elementos filhos do grid:

Para alinhar o item ao topo, adicione a classe grid-self-start
Para alinhar o item ao centro, adicione a classe grid-self-center
Para alinhar o item ao rodapé, adicione a classe grid-self-end

É possível ainda alinhar os itens no eixo x, criando um elemento pai com as seguintes classes:

Para alinhar os itens na esquerda, adicione a classe grid-start
Para alinhar os itens no centro, adicione a classe grid-center
Para alinhar os itens na direita, adicione a classe grid-end
Para distribuir os itens em iguais proporções, adicione a classe grid-between
Para distribuir os itens em iguais proporções e acrescentar um espaço em volta deles, adicione a classe grid-evenly

Nesse exemplo anterior, podem-ser acrescentados quantos elementos filhos forem necessários, desde que comportem no tamanho do layout.

Exemplo no eixo-y ao centro (grid-align-center)

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus officia ipsum quam autem laborum aliquid rerum error pariatur, in minus voluptas sint maxime, quas, quae quis impedit expedita fugiat maiores. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Ut necessitatibus tenetur eligendi alias quis aperiam quia earum facilis.

Exemplo no eixo-y ao rodapé (grid-align-end)

Doloremque itaque nulla eaque tenetur vel, aspernatur minus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Exemplo no eixo-y para cada item individualmente

(grid-self-end)

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

(grid-self-center)

O valor do mosaic-numero* corresponde à tela com tamanho indefinido (padrão);

O valor do mosaic-xs-numero* (extra-small) corresponde à tela com tamanho mínimo de 560px;

O valor do mosaic-s-numero* (small) corresponde à tela com tamanho mínimo de 768px;

O valor do mosaic-m-numero* (medium) corresponde à tela com tamanho mínimo de 992px;

O valor do mosaic-l-numero* (large) corresponde à tela com tamanho mínimo de 1200px;

Exemplo de mosaico 1 - default (mosaic mosaic-1)

item 1
item 2
item 3
item 4

Exemplo de mosaico 2 - A partir de 1200px (mosaic mosaic-l-2)

item 1
item 2
item 3
item 4

Exemplo de mosaico 3 - A partir de 992px (mosaic mosaic-m-3)

item 1
item 2
item 3
item 4

Exemplo de mosaico 4 - A partir de 768px (mosaic mosaic-s-4)

item 1
item 2
item 3
item 4

O sistema de grid foi desenvolvido com uso do CSS Grid Layout e portanto, não é compatível com todos os browsers, principalmente os mais antigos. No site do Can I use é possível verificar à compatibilidade.