Conception de page web responsive - Vue de grille

Qu'est-ce qu'une vue de grille ?

De nombreuses pages web sont basées sur la vue de grille (grid-view), ce qui signifie que la page est divisée en plusieurs colonnes :

L'utilisation de la vue de grille est très utile lors de la conception de pages web. Cela permet de placer plus facilement les éléments sur la page.

Les vues de grille responsive ont généralement 12 colonnes, une largeur totale de 100 % et se rétrécissent et s'étendent lors de l'ajustement de la taille de la fenêtre du navigateur.

Construire une vue de grille responsive

Commençons à construire une vue de grille responsive.

Assurez-vous d'abord que tous les éléments HTML box-sizing La propriété est définie sur border-boxDe cette manière, vous pouvez vous assurer que la largeur et la hauteur totales des éléments incluent les marges internes (remplissage) et les bordures.

Ajoutez le code suivant dans votre CSS :

* {
  box-sizing: border-box;
}

Veuillez consulter notre Box Sizing CSS Pour plus d'informations sur la propriété box-sizing, consultez ce chapitre.

L'exemple suivant montre une page web responsive simple, qui contient deux colonnes :

25%
75%

Exemple

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

Essayez-le vous-même

Si le site web ne contient que deux colonnes, l'exemple ci-dessus est assez bon.

Mais, nous souhaitons utiliser une vue de grille réactive de 12 colonnes pour mieux contrôler le site web.

Tout d'abord, nous devons calculer le pourcentage d'une colonne : 100% / 12 colonnes = 8.33%.

Ensuite, nous créons une classe pour chaque colonne des 12 colonnes, c'est-à-dire class="col-" et un nombre, qui définit le nombre de colonnes que cette 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%;}

Essayez-le vous-même

Toutes ces colonnes doivent flotter à gauche et avoir une marge interne de 15px :

CSS :

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Chaque rangée doit être entourée de <div> Les colonnes en ligne devraient toujours additionner un total de 12 :

HTML :

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Tous les colonnes en ligne flottent à gauche, ce qui les retire du flux de la page et place d'autres éléments, comme si elles n'existaient pas. Pour éviter cela, nous ajoutons des styles de clarification du flux :

CSS :

.row::after {
  content: "";
  clear: both;
  display: table;
}

Nous voulons é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;
}

Essayez-le vous-même

Veuillez noter que lorsque vous ajustez la largeur de la fenêtre du navigateur à une très petite taille, les pages exemples ne sont pas idéales. Vous apprendrez à résoudre ce problème au chapitre suivant.