W3.CSS - Grids
O W3.CSS fornece uma grade responsiva a fluido de 12 colunas.
Ele usa as classes de estilo w3-row e w3-col para definir linhas e colunas, respectivamente.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | w3-row Especifica um contêiner sem preenchimento a ser usado para colunas responsivas. Esta aula é obrigatória para que as classes responsivas sejam totalmente responsivas. |
| 2 | w3-col Especifica uma coluna com subclasses |
w3-col tem várias subclasses destinadas a diferentes tipos de telas.
Colunas para dispositivos de tela pequena
Aqui está uma lista de estilos em nível de coluna para dispositivos de tela pequena, geralmente smartphones.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | s1 Define 1 de 12 colunas com largura de 08,33%. |
| 2 | s2 Define 2 de 12 colunas com largura de 16,66%. |
| 3 | s3 Define 3 de 12 colunas com largura de 25,00%. |
| 4 | s4 Define 4 de 12 colunas com largura de 33,33%. |
| 5 | s12 Define 12 de 12 colunas com largura de 100%. Classe padrão para telefones de tela pequena. |
Colunas para dispositivos de tela média
Aqui está uma lista de estilos em nível de coluna para dispositivos de tela média, normalmente tablets.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | m1 Define 1 de 12 colunas com largura de 08,33%. |
| 2 | m2 Define 2 de 12 colunas com largura de 16,66%. |
| 3 | m3 Define 3 de 12 colunas com largura de 25,00%. |
| 4 | m4 Define 4 de 12 colunas com largura de 33,33%. |
| 5 | m12 Define 12 de 12 colunas com largura de 100%. Classe padrão para telefones de tela média. |
Colunas para dispositivos de tela grande
Aqui está uma lista de estilos em nível de coluna para dispositivos de tela grande, geralmente laptops.
| Sr. Não. | Nome e descrição da classe |
|---|---|
| 1 | |1 Define 1 de 12 colunas com largura de 08,33%. |
| 2 | |2 Define 2 de 12 colunas com largura de 16,66%. |
| 3 | |3 Define 3 de 12 colunas com largura de 25,00%. |
| 4 | |4 Define 4 de 12 colunas com largura de 33,33%. |
| 5 | |12 Define 12 de 12 colunas com largura de 100%. Classe padrão para dispositivos de tela grande. |
Uso
Cada subclasse determina o número de colunas da grade a ser usado com base no tipo de um dispositivo. Considere o seguinte snippet de HTML.
<div class = "w3-row">
<div class = "w3-col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
</div>
</div>As colunas padrão a serem usadas são 12 em um dispositivo se uma subclasse não for mencionada no atributo de classe de um elemento HTML.
Exemplo
w3css_grids.htm
<html>
<head>
<title>The W3.CSS Grids</title>
<meta name = "viewport" content="width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<div class = "w3-row">
<div class = "w3-col m1 w3-center w3-grey">1</div>
<div class = "w3-col m1 w3-center">2</div>
<div class = "w3-col m1 w3-center w3-grey">3</div>
<div class = "w3-col m1 w3-center">4</div>
<div class = "w3-col m1 w3-center w3-grey">5</div>
<div class = "w3-col m1 w3-center">6</div>
<div class = "w3-col m1 w3-center w3-grey">7</div>
<div class = "w3-col m1 w3-center">8</div>
<div class = "w3-col m1 w3-center w3-grey">9</div>
<div class = "w3-col m1 w3-center">10</div>
<div class = "w3-col m1 w3-center w3-grey">11</div>
<div class = "w3-col m1 w3-center">12</div>
</div>
<div class = "w3-row">
<div class = "w3-col w3-container m4 l3 w3-yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
</div>
<div class = "w3-col w3-container s4 m8 l9">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
</div>
</div>
</body>
</html>Resultado
Verifique o resultado.