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.
