Web Design Responsivo - Visualização em Grade
O que é uma visualização em grade?
Muitas páginas da web são baseadas em uma exibição de 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 exibição de grade responsiva geralmente tem 12 colunas e uma largura total de 100%, e diminuirá e expandirá à medida que você redimensionar a janela do navegador.
Exemplo: exibição de grade responsiva
Criando uma exibição de grade responsiva
Vamos começar a construir uma exibição de grade responsiva.
Primeiro, certifique-se de que todos os elementos HTML tenham a box-sizingpropriedade definida como
border-box. Isso garante que o preenchimento e a borda sejam incluídos na largura e altura totais dos elementos.
Adicione o seguinte código em seu CSS:
* {
box-sizing: border-box;
}
Leia mais sobre a box-sizingpropriedade em nosso capítulo CSS Box Sizing .
O exemplo a seguir mostra uma página da Web responsiva simples, com duas colunas:
Exemplo
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
O exemplo acima é bom se a página da web contiver apenas duas colunas.
No entanto, queremos usar uma exibição de grade responsiva com 12 colunas, para ter mais controle sobre a página da web.
Primeiro devemos calcular a porcentagem de uma coluna: 100% / 12 colunas = 8,33%.
Em seguida, criamos uma classe para cada uma das 12 colunas class="col-"e um número definindo quantas colunas a seção deve abranger:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
Todas essas colunas devem estar flutuando para a esquerda e ter um preenchimento de 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Cada linha deve ser envolvida em um arquivo <div>. O número de colunas dentro de uma linha deve sempre somar 12:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
As colunas dentro de uma linha estão todas flutuando para a esquerda e, portanto, são retiradas do fluxo da página, e outros elementos serão colocados como se as colunas não existissem. Para evitar isso, adicionaremos um estilo que limpa o fluxo:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
Também queremos adicionar alguns estilos e cores para torná-lo melhor:
Exemplo
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Observe que a página da Web no exemplo não parece boa quando você redimensiona a janela do navegador para uma largura muito pequena. No próximo capítulo, você aprenderá como corrigir isso.