O que é um Grid-View?
Muitas páginas da web são baseados em uma grade-view, o que significa que a página é dividida em colunas:
Usando uma grade-view é muito útil ao projetar páginas da web. Ela torna mais fácil para colocar elementos na página.
Uma grade-view sensível, muitas vezes tem 12 colunas, e tem uma largura total de 100%, e vai encolher e expandir como você redimensionar a janela do navegador.
Construir uma Responsive Grade-View
Vamos começar a construir uma grade-view responsivo.
Primeiro garantir que todos os elementos HTML têm a box-sizing propriedade definida como border-box . Isso garante que o estofamento e a borda, estão incluídos na largura e altura total dos elementos.
Adicione o seguinte código no seu CSS:
* {
box-sizing: border-box;
}
Leia mais sobre o box-sizing propriedade em nossa CSS3 Box Dimensionamento capítulo.
O exemplo a seguir mostra uma página web responsivo simples, com duas colunas:
O exemplo acima é bom se a página web contém apenas duas colunas.
No entanto, nós queremos usar uma grade-view responsivo com 12 colunas, para ter mais controle sobre a página web.
Primeiro devemos calcular a porcentagem de uma coluna: 100% / 12 colunas = 8,33%.
Em seguida, fazemos uma classe para cada uma das 12 colunas, class="col-" e um número que define quantas colunas da 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%;} Tente você mesmo " Todas estas colunas deve ser flutuante para a esquerda, e tem um preenchimento de 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} Cada linha deve ser envolto em um <div> . O número de colunas dentro de uma linha deve sempre adicionar até 12:
HTML:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>As colunas dentro de uma linha de flutuação são todos para a esquerda, e portanto, são levados para fora do fluxo da página, e outros elementos serão colocados, como se não existirem as colunas. Para evitar isso, vamos adicionar um estilo que apura o fluxo:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}Nós também queremos adicionar alguns estilos e cores para torná-la 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;
} Tente você mesmo " Observe que a página da Web no exemplo não parece bom quando você redimensionar a janela do navegador para uma pequena largura. No próximo capítulo, você vai saber como corrigir isso.