Grille de conception Web réactive
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 le box-sizing proprié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 :
* {
dimensionnement de la boîte : border-box ;
}
En savoir plus sur le box-sizing propriété dans notre chapitre CSS Box Sizing.
L’exemple suivant montre une page Web réactive simple, avec deux colonnes :
Exemple
.menu {
largeur : 25 % ;
flotteur : gauche ;
}
.principal {
largeur : 75 % ;
flotteur : gauche ;
}
Essayez-le vous-même »
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 faisons 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 {largeur : 8,33 % ;}
.col-2 {largeur : 16,66 % ;}
.col-3 {largeur : 25 % ;}
.col-4 {largeur : 33,33 % ;}
.col-5 {largeur : 41,66 % ;}
.col-6 {largeur : 50 % ;}
.col-7 {largeur : 58,33 % ;}
.col-8 {largeur : 66,66 % ;}
.col-9 {largeur : 75 % ;}
.col-10 {largeur : 83,33 % ;}
.col-11 {largeur : 91,66 % ;}
.col-12 {largeur : 100 % ;}
Essayez-le vous-même »
Toutes ces colonnes doivent flotter à gauche et avoir un rembourrage de 15 px :
CSS :
[class*=”col-“] {
flotteur : gauche ;
rembourrage : 15px ;
bordure : 1 pixel rouge uni ;
}
Chaque rangée doit être enveloppée dans un <div>. Le nombre de colonnes à l’intérieur d’une ligne doit toujours totaliser 12 :
HTML :
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 :: après {
contenu: “”;
clarifier les deux;
affichage : tableau ;
}
Nous souhaitons également ajouter des styles et des couleurs pour le rendre plus beau :
Exemple
html {
famille de polices : “Lucida Sans”, sans empattement ;
}
.entête {
couleur de fond : #9933cc ;
couleur : #ffffff ;
rembourrage : 15px ;
}
.menu ul {
type de style de liste : aucun ;
marge : 0 ;
rembourrage : 0 ;
}
.menu li {
rembourrage : 8px ;
marge inférieure : 7px ;
couleur de fond :#33b5e5;
couleur : #ffffff ;
boîte-ombre : 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
couleur de fond : #0099cc ;
}
Essayez-le vous-même »
Avis 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.
#Grille #conception #Web #réactive