Rede fluida responsiva W3.CSS
Grade responsiva
W3.CSS suporta uma grade de fluido responsiva de 12 colunas.
Redimensione a página para ver o efeito!
Esta parte ocupará 12 colunas em uma tela pequena, 4 em uma tela média e 3 em uma tela grande.
Esta parte ocupará 12 colunas em uma tela pequena, 8 em uma tela média e 9 em uma tela grande.
Exemplo
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div>
Linhas responsivas
O sistema de grade do W3.CSS é responsivo. As colunas serão reorganizadas automaticamente dependendo do tamanho da tela: em uma tela grande, pode parecer melhor com o conteúdo organizado em três colunas, mas em uma tela pequena pode ser melhor se o conteúdo for empilhado um sobre o outro.
| Classe | Descrição |
|---|---|
| w3-linha | Container para classes responsivas, sem preenchimento |
| w3-row-preenchimento | Contêiner para classes responsivas, com preenchimento esquerdo e direito de 8px |
| w3-col | Define uma coluna em uma grade responsiva de 12 colunas |
w3-col tem as seguintes subclasses:
Colunas para telas pequenas (smartphones típicos):
| Classe | Descrição |
|---|---|
| s1 | Define 1 de 12 colunas (largura:08,33%) para telas pequenas |
| s2 | Define 2 de 12 colunas (largura:16,66%) para telas pequenas |
| s3 | Define 3 de 12 colunas (largura:25,00%) para telas pequenas |
| s4 | Define 4 de 12 colunas (largura:33,33%) para telas pequenas |
| s5-s11 | |
| s12 | Define 12 de 12 colunas (largura:100%). Padrão para telas pequenas |
Colunas para telas médias (tablets típicos):
| Classe | Descrição |
|---|---|
| m1 | Define 1 de 12 colunas (largura:08,33%) para telas médias |
| m2 | Define 2 de 12 colunas (largura:16,66%) para telas médias |
| m3 | Define 3 de 12 colunas (largura:25,00%) para telas médias |
| m4 | Define 4 de 12 colunas (largura:33,33%) para telas médias |
| m5-m11 | |
| m12 | Define 12 de 12 colunas (largura:100%). Padrão para telas médias |
Colunas para telas grandes (laptops e desktops típicos):
| Classe | Descrição |
|---|---|
| l1 | Define 1 de 12 colunas (largura:08,33%) para telas grandes |
| l2 | Define 2 de 12 colunas (largura:16,66%) para telas grandes |
| l3 | Define 3 de 12 colunas (largura:25,00%) para telas grandes |
| l4 | Define 4 de 12 colunas (largura:33,33%) para telas grandes |
| l5-l11 | |
| l12 | Define 12 de 12 colunas (largura:100%). Padrão para telas grandes) |
As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.
Cada classe aumenta, portanto, se você deseja definir a mesma largura para telas pequenas, médias e grandes, basta especificar a classe pequena . E se você quiser a mesma largura em telas médias e grandes, você só precisa especificar a classe média.
No entanto, se você usar apenas classes médias e/ou grandes, a largura sempre se transformará em 100% em telas pequenas.
Nota: O número de colunas deve sempre somar 12 para cada linha (6+6, 3+3+6, 9+3, etc)!
Duas Colunas Iguais
Duas colunas de largura igual (50%/50%) em todos os tamanhos de tela:
s6
s6
Exemplo
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
Duas colunas desiguais
Duas colunas de largura desigual (25%/75%) em todos os tamanhos de tela:
s3
s9
Exemplo
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
Três Colunas Iguais
Três colunas de largura igual (33,3%/33,3%/33,3%) em todos os tamanhos de tela:
s4
s4
s4
Exemplo
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div>
Três Colunas Desiguais
Três colunas de várias larguras (25%/50%/25%) em tablets, laptops e desktops. Em telefones celulares, as colunas serão empilhadas automaticamente (100% de largura):
m3
m6
m3
Exemplo
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div>
Nota: Este exemplo é o mesmo que usar w3-quarter (m3), w3-half (m6), w3-quarter (m3), que você aprendeu no capítulo W3.CSS Responsive .
Seis Colunas
Seis colunas de igual largura (16% cada) em tablets, laptops e desktops. Em telefones celulares, as colunas serão empilhadas automaticamente (100% de largura):
m2
m2
m2
m2
m2
m2
Exemplo
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
Misto: Celular e Laptops
Você pode combinar classes para criar um layout dinâmico e flexível. Este exemplo produzirá um layout de duas colunas com uma divisão de 83,34%/16,66% (l10, l2) em telas grandes e uma divisão de 50%/50% (s6, s6) em telas pequenas:
l10 s6
l2 s6
Exemplo
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Misto: Celular, Tablets e Laptops
Este exemplo produzirá um layout de três colunas com uma divisão de 25%/58,34%/16,66% (l3, l7, l2) em telas grandes, 50%/25%/25% (m6, m3, m3) em telas médias e uma divisão de 33,3%/33,3%/33,3% (s4, s4, s4) em telas pequenas:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Exemplo
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
Diferença entre w3-row e w3-row-preenchimento
A classe w3-row define um contêiner sem preenchimento, enquanto a classe w3-row-padding adiciona um preenchimento esquerdo e direito de 8px a cada coluna:
w3-linha:
w3-row-preenchimento:
Exemplo
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Usando w3-rest
A classe w3-rest é uma classe poderosa e flexível que usará o que resta da coluna da grade.
150px
descanso
75px
descanso
100px
100px
descanso
trimestre
80px
descanso
trimestre
trimestre
trimestre
35%
descanso
Exemplo usando rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
O elemento usando class="w3-rest" deve ser sempre o último elemento no código-fonte.
Usando Porcentagem
Use a propriedade largura do CSS para determinar uma largura específica das colunas.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Exemplo
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>