Lors de la conception d'une page Web alignant les éléments dans des positions appropriées est d'une grande importance tout en les rendant réactifs, ce qui signifie qu'ils modifieront leur comportement en fonction des différents types d'appareils affichant la page Web. Une façon d'effectuer à la fois les tâches susmentionnées est de construire un système de vue de grille. Ici, dans cet article, nous vous guiderons étape par étape concernant la façon de faire une vue de grille réactive à partir de zéro.

Avant de sauter vers sa construction, explorons ce qu'est une vue de grille.

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

Une vue sur la grille est une technique qui partitionne une page Web dans diverses colonnes qui facilite le positionnement des éléments. Une vue sur la grille, qui est de nature réactive, se compose généralement de 12 colonnes avec une largeur de 100% et s'évalent en fonction de la taille du navigateur Web.

Voyons maintenant comment construire une vue de grille réactive à partir de zéro.

Construire une vue de grille réactive

Ci-dessous, nous avons démontré la procédure étape par étape de construction d'une vue de grille réactive.

Prérequis

Avant de sauter vers le codage, vous devez esquisser la vue de la grille sur papier afin que vous sachiez exactement où placer quel élément. Par exemple, voici l'esquisse de la vue de la grille que nous allons construire.

Maintenant que nous avons notre croquis, commençons la partie de codage.

Étape 1

La nécessité de base pour rendre une page Web réactive est d'ajouter une balise Meta réactive dans votre fichier HTML.

Html

L'attribut width = device-width signifie que la largeur de la page Web changera en correspondance avec la largeur du périphérique, tandis que l'échelle initiale = 1.0 Attribut signifie lorsque la page Web est chargée par le navigateur pour la première fois que le niveau de zoom sera 1.

Étape 2

Ajoutez des éléments HTML que vous souhaitez afficher sur la page Web.

Html

Indice de linux

Pour ajouter du contenu dans notre section d'en-tête, nous fabriquons un conteneur Div et enveloppons notre direction à l'intérieur de ce conteneur.

Html

• À propos de nous


• Auteurs


• Articles publiés


• Catégories d'articles

Tout sur les langages de programmation!

Ici, vous trouverez des articles bien écrits et bien structurés liés à tous les langages de programmation composés par nos auteurs raffinés.

Dans le but d'insérer du contenu dans la barre latérale, nous avons fait une div avec des noms de classe «Col-3 Sidebar» et imbriqué une liste non ordonnée à l'intérieur. En ce qui concerne la section principale, nous avons ajouté deux paragraphes et les avons imbriqués dans un autre div avec des noms de classe «Col-9 Main». Les deux éléments div sont plus nichés dans une div plus grande avec le nom de classe «conteneur».

Les classes affectées aux éléments de div imbriqués seront expliquées plus tard.

Marcher 3

Maintenant, nous avons fini avec notre pièce HTML et passez maintenant à notre partie CSS du code. La première chose qui doit être faite dans la feuille de style est de définir la propriété de dimensionnement des boîtes d'éléments HTML sur Border-Box.

CSS

*
Dimensionnement en boîte: Border-Box;

La raison derrière cela est que cette propriété comprend le rembourrage et la bordure de la hauteur totale et de la largeur des éléments HTML.

Marcher 4

Maintenant, convertissons notre page en une vue de grille réactive de 12 colonnes. Pour ce faire, nous devons effectuer certains calculs pour fournir certaines largeurs à chaque colonne et prendre le contrôle sur la page Web lorsqu'il s'agit d'organiser les éléments.

La largeur d'une seule colonne = 1/12 de la largeur totale de l'écran = 100% / 12 = 8.33%.

La largeur de deux colonnes combinées = 2/12 de la largeur totale de l'écran = 2 (100%) / 12 = 16.66%

La largeur de trois colonnes combinées = 3/12 de la largeur totale de l'écran = 3 (100%) / 12 = 25%

La largeur de quatre colonnes combinées = 4/12 de la largeur totale de l'écran = 4 (100%) / 12 = 33.33%

Et ainsi de suite.

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%;

La largeur de toutes les colonnes a été définie dans le CSS.

Note:

Nous voulions placer notre barre latérale et notre section principale en deux colonnes. Une vue de grille avec deux colonnes ressemble à quelque chose comme ça.

Lorsque nous regardons les largeurs des différentes colonnes du code ci-dessus, nous découvrons que trois colonnes auront 25% de largeur et que neuf colonnes auront une largeur de 75%. Par conséquent, la div qui niche la liste des menues a été attribuée .col-3 classe, alors que la div avec le contenu de la section principale a été donnée .col-9 classe.

Étape 5

Maintenant en utilisant la classe ".col- ”, fournissons un rembourrage aux colonnes et flottons-les vers la gauche.

CSS

[class * = "Col-"]
flottant: à gauche;
rembourrage: 10px;

La propriété Float: gauche place ces colonnes à gauche du conteneur les tenant afin que le texte et d'autres éléments en ligne s'enveloppent à l'intérieur des colonnes. Cependant, cela positionnera les éléments comme si les colonnes ne sont pas du tout là. Par conséquent, nous devons effacer le flux. Pour ce faire, suivez l'extrait de code ci-dessous.

CSS

.conteneur :: après
contenu: "";
clarifier les deux;
Affichage: table;

Le: après le cours et la propriété de contenu est utilisé pour ajouter du contenu après le conteneur. En attendant, la valeur du tableau de la propriété d'affichage fera apparaître le contenu sous la forme d'un tableau I.E dans les lignes et les colonnes.

Étape 6

.entête
Color d'arrière-plan: bisque;
Couleur blanche;
rembourrage: 20px;

.barre latérale ul
marge: auto;
rembourrage: 0px;

.barre latérale li
rembourrage: 10px;
marge-fond: 10px;
Color en arrière-plan: Rosybrown;
Couleur blanche;

Enfin, nous stylisons maintenant nos éléments en utilisant les classes affectées aux conteneurs div de l'en-tête et la barre latérale.

Sortir

La page Web a été affichée à des largeurs d'écran aléatoires.

Ceci est notre page Web à 1250px.

Notre page Web à la largeur de 600px.

Conclusion

Pour créer une vue de grille réactive, vous devez d'abord esquisser la mise en page que vous souhaitez que votre page Web ait ensuite diviser votre page en différentes colonnes. Par exemple, dans l'exemple utilisé dans cet article, nous avons divisé notre page en 12 colonnes en calculant le pourcentage de chaque colonne. Par la suite, vous pouvez utiliser ce pourcentage pour placer vos éléments avec précision sur différentes colonnes. Dans ce guide, nous vous avons montré une procédure étape par étape pour construire une vue de grille à partir de zéro.