Qu'est-ce qu'un grille-View?
De nombreuses pages web sont basés sur une grille-vue, ce qui signifie que la page est divisée en colonnes:
L'utilisation d'une grille-vue est très utile lors de la conception de pages Web. Il est plus facile de placer des éléments sur la page.
Une grille vue sensible a souvent 12 colonnes, et a une largeur totale de 100%, et se contractera et étendre comme vous redimensionnez la fenêtre du navigateur.
Construire une Responsive Grille-View
Permet de commencer à construire une grille vue réactive.
Tout d' abord veiller à ce que tous les éléments HTML ont le box-sizing propriété située à border-box . Cela fait en sorte que le rembourrage et la bordure sont inclus dans la largeur et la hauteur des éléments.
Ajoutez le code suivant dans votre CSS:
* {
box-sizing: border-box;
}
En savoir plus sur le box-sizing propriété dans notre CSS3 Box Sizing chapitre.
L'exemple suivant montre une page web en réponse simple, avec deux colonnes:
Exemple
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Essayez - le vous - même » L'exemple ci-dessus est très bien si la page Web ne contient que deux colonnes.
Cependant, nous voulons utiliser une grille vue sensible avec 12 colonnes, d'avoir plus de contrôle sur la page Web.
Nous devons 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 de la section devrait 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%;} Essayez - le vous - même » Toutes ces colonnes doivent être flottant à gauche, et ont un rembourrage de 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} Chaque ligne doit être enveloppé dans un <div> . Le nombre de colonnes dans une ligne doit toujours ajouter jusqu'à 12:
HTML:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>Les colonnes à l'intérieur d'une rangée sont tous flottent à la gauche, et sont donc retirés de la circulation de la page, et d'autres éléments seront placés comme si n'existe pas les colonnes. Pour éviter cela, nous allons ajouter un style qui efface le flux:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}Nous voulons aussi ajouter des styles et des couleurs pour le faire paraître mieux:
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;
} Essayez - le vous - même » Notez que la page Web dans l'exemple ne semble pas bon lorsque vous redimensionnez la fenêtre du navigateur à une très faible largeur. Dans le chapitre suivant, vous apprendrez comment résoudre ce problème.