W3.CSS Responsive Fluid Grid
Grille réactive
W3.CSS prend en charge une grille fluide réactive à 12 colonnes.
Redimensionnez la page pour voir l'effet !
Cette partie occupera 12 colonnes sur un petit écran, 4 sur un écran moyen, et 3 sur un grand écran.
Cette partie occupera 12 colonnes sur un petit écran, 8 sur un écran moyen, et 9 sur un grand écran.
Exemple
<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>
Lignes réactives
Le système de grille de W3.CSS est réactif. Les colonnes se réorganiseront automatiquement en fonction de la taille de l'écran : sur un grand écran, le contenu peut être mieux organisé en trois colonnes, mais sur un petit écran, il peut être préférable que le contenu soit empilé les uns sur les autres.
| Classer | La description |
|---|---|
| w3 rangées | Conteneur pour les classes réactives, sans remplissage |
| rembourrage w3-row | Conteneur pour les classes réactives, avec un rembourrage gauche et droit de 8 pixels |
| w3-col | Définit une colonne dans une grille réactive à 12 colonnes |
w3-col a les sous-classes suivantes :
Colonnes pour petits écrans (téléphones intelligents typiques) :
| Classer | La description |
|---|---|
| s1 | Définit 1 colonne sur 12 (largeur : 08,33 %) pour les petits écrans |
| s2 | Définit 2 colonnes sur 12 (largeur : 16,66 %) pour les petits écrans |
| s3 | Définit 3 colonnes sur 12 (largeur : 25,00 %) pour les petits écrans |
| s4 | Définit 4 colonnes sur 12 (largeur : 33,33 %) pour les petits écrans |
| s5-s11 | |
| s12 | Définit 12 colonnes sur 12 (largeur : 100 %). Par défaut pour les petits écrans |
Colonnes pour écrans moyens (tablettes typiques) :
| Classer | La description |
|---|---|
| m1 | Définit 1 colonne sur 12 (largeur : 08,33 %) pour les écrans moyens |
| m2 | Définit 2 colonnes sur 12 (largeur : 16,66 %) pour les écrans moyens |
| m3 | Définit 3 colonnes sur 12 (largeur : 25,00 %) pour les écrans moyens |
| m4 | Définit 4 colonnes sur 12 (largeur : 33,33 %) pour les écrans moyens |
| m5-m11 | |
| m12 | Définit 12 colonnes sur 12 (largeur : 100 %). Par défaut pour les écrans moyens |
Colonnes pour les grands écrans (ordinateurs portables et ordinateurs de bureau typiques) :
| Classer | La description |
|---|---|
| l1 | Définit 1 des 12 colonnes (largeur : 08,33 %) pour les grands écrans |
| l2 | Définit 2 colonnes sur 12 (largeur : 16,66 %) pour les grands écrans |
| l3 | Définit 3 colonnes sur 12 (largeur : 25,00 %) pour les grands écrans |
| l4 | Définit 4 colonnes sur 12 (largeur : 33,33 %) pour les grands écrans |
| l5-l11 | |
| l12 | Définit 12 colonnes sur 12 (largeur : 100 %). Par défaut pour les grands écrans) |
Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.
Chaque classe évolue, donc si vous souhaitez définir la même largeur pour les petits, moyens et grands écrans, il vous suffit de spécifier la petite classe. Et si vous voulez la même largeur sur des écrans moyens et grands, il vous suffit de spécifier la classe moyenne.
Cependant, si vous n'utilisez que des classes moyennes et/ou grandes, la largeur se transformera toujours à 100 % sur les petits écrans.
Remarque : Le nombre de colonnes doit toujours totaliser 12 pour chaque ligne (6+6, 3+3+6, 9+3, etc.) !
Deux colonnes égales
Deux colonnes de largeur égale (50 %/50 %) sur toutes les tailles d'écran :
s6
s6
Exemple
<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>
Deux colonnes inégales
Deux colonnes de largeur inégale (25%/75%) sur toutes les tailles d'écran :
s3
s9
Exemple
<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>
Trois colonnes égales
Trois colonnes de même largeur (33,3 %/33,3 %/33,3 %) sur toutes les tailles d'écran :
s4
s4
s4
Exemple
<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>
Trois colonnes inégales
Trois colonnes de différentes largeurs (25 %/50 %/25 %) sur les tablettes, les ordinateurs portables et les ordinateurs de bureau. Sur les téléphones mobiles, les colonnes s'empileront automatiquement (100 % de largeur) :
m3
m6
m3
Exemple
<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>
Remarque : cet exemple est identique à l'utilisation de w3-quart (m3), w3-demi (m6), w3-quart (m3), que vous avez appris dans le chapitre W3.CSS Responsive .
Six colonnes
Six colonnes de largeur égale (16 % chacune) sur les tablettes, les ordinateurs portables et les ordinateurs de bureau. Sur les téléphones mobiles, les colonnes s'empileront automatiquement (100 % de largeur) :
m2
m2
m2
m2
m2
m2
Exemple
<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>
Mixte : mobiles et ordinateurs portables
Vous pouvez combiner des classes pour créer une mise en page dynamique et flexible. Cet exemple produira une mise en page à deux colonnes avec une répartition 83,34 %/16,66 % (l10, l2) sur les grands écrans et une répartition 50 %/50 % (s6, s6) sur les petits écrans :
l10 s6
l2 s6
Exemple
<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>
Mixte : Mobile, Tablettes et Ordinateurs portables
Cet exemple produira une mise en page à trois colonnes avec une répartition 25 %/58,34 %/16,66 % (l3, l7, l2) sur les grands écrans, 50 %/25 %/25 % (m6, m3, m3) sur les écrans moyens et une répartition 33,3 %/33,3 %/33,3 % (s4, s4, s4) sur les petits écrans :
l3 m6 s4
l7 m3 s4
l2 m3 s4
Exemple
<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>
Différence entre w3-row et w3-row-padding
La classe w3-row définit un conteneur sans rembourrage, tandis que la classe w3-row-padding ajoute un rembourrage gauche et droit de 8 pixels à chaque colonne :
w3-ligne :
w3-row-padding :
Exemple
<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>
Utilisation de w3-rest
La classe w3-rest est une classe puissante et flexible qui utilisera ce qui reste de la colonne de la grille.
150px
du repos
75px
du repos
100px
100px
du repos
trimestre
80px
du repos
trimestre
trimestre
trimestre
35%
du repos
Exemple utilisant le repos
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
L'élément utilisant class="w3-rest" doit toujours être le dernier élément du code source.
Utiliser le pourcentage
Utilisez la propriété CSS width pour déterminer une largeur spécifique des colonnes.
20%
60%
20%
45%
55%
15%
35%
dix%
30%
dix%
Exemple
<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>