O que é grid-view?

Muitas páginas da web são baseadas em uma visualização em grade, o que significa que a página é dividida em colunas:

Usar uma visualização em grade é muito útil ao projetar páginas da web. Facilita a colocação de elementos na página.

Uma visão de grade responsiva geralmente tem 12 colunas e uma largura total de 100%, e irá encolher e expandir conforme você redimensiona a janela do navegador.


O que fazer para usar grid em suas páginas?

É preciso se certificar de que todos os elementos HTML tenham a propriedade box-sizing definida como border-box. A aplicação de box-sizing como border-box garantem que a borda seja incluída na altura/largura.

 


* {

  box-sizing: border-box;

}


Depois de usar o código acima terá controle de de sua página.

Poderá definir largura e quantidades de colunas.

Exemplo:

.sidebar-left {

  width: 25%;

  float: left;

}

.sidebar-right {

  width: 25%;

  float: left;

}

.main {

  width: 50%;

  float: left;


O código acima dividiu a página ou parte dela em três colunas.

Se quiser ver como brincamos com Grid View clique AQUI