Conception Web réactive - Vue en grille
Qu'est-ce qu'une vue en grille ?
De nombreuses pages Web sont basées sur une grille, ce qui signifie que la page est divisée en colonnes :
L'utilisation d'une vue en grille est très utile lors de la conception de pages Web. Il facilite le placement des éléments sur la page.
Une vue de grille réactive comporte souvent 12 colonnes et une largeur totale de 100 %, et se rétrécit et s'agrandit lorsque vous redimensionnez la fenêtre du navigateur.
Exemple : vue de grille réactive
Construire une vue de grille réactive
Commençons à créer une vue de grille réactive.
Assurez-vous d'abord que tous les éléments HTML ont la box-sizingpropriété définie sur
border-box. Cela garantit que le rembourrage et la bordure sont inclus dans la largeur et la hauteur totales des éléments.
Ajoutez le code suivant dans votre CSS :
* {
box-sizing: border-box;
}
En savoir plus sur la box-sizingpropriété dans notre chapitre CSS Box Sizing .
L'exemple suivant montre une page Web réactive simple, avec deux colonnes :
Exemple
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
L'exemple ci-dessus convient si la page Web ne contient que deux colonnes.
Cependant, nous souhaitons utiliser une vue de grille réactive avec 12 colonnes, pour avoir plus de contrôle sur la page Web.
Il faut d'abord calculer le pourcentage pour une colonne : 100% / 12 colonnes = 8,33%.
Ensuite, nous créons une classe pour chacune des 12 colonnes, class="col-"et un nombre définissant le nombre de colonnes que la section doit couvrir :
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%;}
Toutes ces colonnes doivent flotter à gauche et avoir un rembourrage de 15 px :
CSS :
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Chaque ligne doit être enveloppée dans un fichier <div>. Le nombre de colonnes à l'intérieur d'une ligne doit toujours totaliser 12 :
HTML :
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Les colonnes à l'intérieur d'une ligne flottent toutes vers la gauche, et sont donc retirées du flux de la page, et d'autres éléments seront placés comme si les colonnes n'existaient pas. Pour éviter cela, nous allons ajouter un style qui efface le flux :
CSS :
.row::after {
content: "";
clear: both;
display: table;
}
Nous souhaitons également ajouter des styles et des couleurs pour le rendre plus beau :
Exemple
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;
}
Notez que la page Web de l'exemple ne s'affiche pas bien lorsque vous redimensionnez la fenêtre du navigateur à une très petite largeur. Dans le chapitre suivant, vous apprendrez comment résoudre ce problème.