De nombreuses pages Web sont basées sur une vue en 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. Cela facilite le placement des éléments sur la page.
Une vue grille réactive comporte souvent 12 colonnes et a une largeur totale de 100 %, et se rétrécira et s'agrandira à mesure que vous redimensionnerez la fenêtre du navigateur.
Exemple : vue en grille réactive :
Commençons par créer une vue grille réactive.
Assurez-vous d'abord que la propriété box-sizing de tous les éléments HTML est définie sur border-box. Cela garantit que le rembourrage et la bordure sont inclus dans la largeur et la hauteur totales de les éléments.
Ajoutez le code suivant dans votre CSS :
* {
box-sizing: border-box;
}En savoir plus sur la propriété box-sizing dans notre chapitre CSS Box Sizing.
L'exemple suivant montre une page Web réactive simple, avec deux colonnes :
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="main">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
L'exemple ci-dessus convient si la page Web ne contient que deux colonnes.
Cependant, nous souhaitons utiliser une vue grille réactive avec 12 colonnes, pour avoir plus contrôle sur la page Web.
Il faut d'abord calculer le pourcentage pour une colonne : 100%/12 colonnes = 8,33%.
Ensuite nous créez une classe pour chacune des 12 colonnes, class="col-" et un nombre définir le nombre de colonnes que la section doit s'étendre :
.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 →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.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%;}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
Toutes ces colonnes doivent flotter vers la gauche et avoir un remplissage de 15 px :
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}Chaque ligne doit être enveloppée dans un <div>. Le nombre de colonnes à l'intérieur d'une ligne, la somme doit toujours être égale à 12 :
<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és du flux de la page et les autres éléments seront placés comme si les colonnes n'existaient pas. Pour éviter cela, nous allons ajoutez un style qui efface le flux :
.row::after {
content: "";
clear: both;
display: table;
}Nous souhaitons également ajouter quelques styles et couleurs pour le rendre plus beau :
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 →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.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%;}
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;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
Remarquez que la page Web de l'exemple ne s'affiche pas correctement 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.