Introduction
Dans "Pet's House", un univers virtuel pour les amateurs d'animaux de compagnie, Alex, un développeur web, entreprend une quête pour moderniser l'affichage de leurs services en utilisant CSS Grid.
Ce laboratoire vise à captiver les utilisateurs en présentant les services de manière organisée et visuellement attrayante. La mission d'Alex est de transformer la section "Affichage" en une mise en grille qui mettra en valeur les services pour animaux de compagnie avec élégance et efficacité.
Propriété de positionnement
La propriété CSS position est un outil puissant qui permet aux développeurs de contrôler le placement exact des éléments sur une page. Elle permet de positionner les éléments selon leur flux normal, par rapport à leur élément parent, par rapport à la vue d'écran ou par rapport à leur ancêtre de défilement le plus proche.
Positionnement statique
static est la valeur par défaut de tous les éléments, ce qui signifie que les éléments sont disposés selon le flux normal du document. Les éléments positionnés statiquement ne sont pas affectés par les propriétés top, right, bottom ou left.
Lorsque vous voulez que les éléments suivent le flux standard, le positionnement statique est votre meilleur choix.
Par exemple, il y a une image d'un robot sur le côté gauche de la page, et si nous définissons cet élément sur position:static, alors lorsque nous défiletons la page, cette image suivra également le défilement de la page.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.full-page-img {
width: 100%;
margin-left: 15%;
}
.box img {
width: 90%;
}
.ad-l {
position: static;
top: 100px;
left: 0;
width: 150px;
}
</style>
</head>
<body>
<img src="robot.png" class="ad-l" />
<div class="full-page-img">
<img src="page.png" />
</div>
</body>
</html>
Positionnement fixe
Le positionnement fixed place un élément par rapport à la vue d'écran de la fenêtre du navigateur. L'élément restera au même endroit même si la page est défilée.
Pour créer une barre de navigation qui est fixée en haut ou en bas de la page.
Par exemple, il y a une image d'un robot sur le côté gauche de la page, si nous définissons cet élément sur position:fixed, alors lorsque nous défiletons la page, cette image ne disparaîtra pas en raison du défilement de la page, l'image restera en position fixe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.full-page-img {
width: 100%;
margin-left: 15%;
}
.box img {
width: 90%;
}
.ad-l {
position: fixed;
top: 100px;
left: 0;
width: 150px;
}
</style>
</head>
<body>
<img src="robot.png" class="ad-l" />
<div class="full-page-img">
<img src="page.png" />
</div>
</body>
</html>
Positionnement relatif
Le positionnement relative vous permet de décaler un élément par rapport à sa position normale. Même si décalé, l'élément occupe toujours son espace d'origine.
Lorsque vous avez besoin de légèrement ajuster la position d'un élément sans affecter les autres parties de la mise en page.
Par exemple, nous avons déplacé l'image du robot sur le côté gauche de la page d'un certain nombre de pixels dans les directions top et left par rapport à sa position normale.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%;
}
.box img {
width: 90%;
}
.ad-l {
position: relative;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<img src="labby.png" class="ad-l" />
<div class="box">
<img src="page.png" />
</div>
</body>
</html>
Positionnement absolu
Le positionnement absolute place un élément par rapport à son ancêtre positionné le plus proche s'il y en a un, ou sinon par rapport au bloc de contenu initial. Il est retiré du flux du document et n'occupe pas d'espace.
Lorsque vous avez besoin de créer un élément flottant, tel qu'un modal ou un menu déroulant.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%;
}
.box img {
width: 90%;
}
.ad-l {
position: absolute;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<img src="labby.png" class="ad-l" />
<div class="box">
<img src="page.png" />
</div>
</body>
</html>
Une fois que vous comprenez l'utilisation de l'attribut position, nous pouvons ajouter ce qui suit à style.css:
header {
position: fixed;
display: flex;
flex-direction: row;
background-color: rgb(233, 174, 87);
width: 100%;
max-height: max-content;
min-height: 1em;
padding-top: 1%;
padding-bottom: 1%;
text-transform: uppercase;
}
.navigation li {
position: relative;
display: inline-block;
}
.service figure {
position: relative;
}
.service figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}
Grille de base
Dans le laboratoire précédent, nous avons appris Flexbox, mais la mise en page de la page pour les animaux de compagnie n'a pas atteint l'effet que nous souhaitions. Donc, dans la prochaine étape, nous allons étudier une autre mise en page - la mise en page en grille.
La mise en page en grille CSS (Grid) est un système de mise en page basé sur une grille qui permet aux développeurs de créer des mises en page web réactives. La grille peut diviser les pages en régions principales ou définir la mise en page de composants plus petits.
Pour utiliser la mise en page en grille, vous devez d'abord définir la propriété display: grid; sur un élément conteneur. Nous pouvons ajouter ce qui suit à style.css:
.container {
display: grid;
padding: 0px;
padding-top: 1em;
width: 100%;
}
.services {
width: 90%;
display: grid;
margin: 20px auto;
}
Définition des lignes et des colonnes
Ensuite, utilisez les propriétés grid-template-columns et grid-template-rows pour définir les lignes et les colonnes dans le conteneur.
Par exemple,.container configure un mode d'affichage en grille avec des dimensions spécifiques pour les colonnes et les lignes :
display: grid;active la mise en page en grille pour le conteneur.grid-template-columns: 50px 100px;définit deux colonnes où la première colonne mesure 50 pixels de large et la seconde colonne mesure 100 pixels de large.grid-template-rows: 30px 60px;définit deux lignes où la première ligne mesure 30 pixels de haut et la seconde ligne mesure 60 pixels de haut.
Nous pouvons ajouter ce qui suit à style.css :
.container {
display: grid;
grid-template-columns: 100%;
padding: 0px;
padding-top: 1em;
width: 100%;
}
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
margin: 20px auto;
}
Le fr est une unité de longueur flexible, représentant une fraction de l'espace disponible dans le conteneur de grille.
Espacement de grille
La propriété grid-gap (il est désormais recommandé d'utiliser gap, row-gap et column-gap) peut définir l'espace entre les lignes et les colonnes de la grille.
Nous pouvons ajouter ce qui suit à style.css :
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
gap: 5%;
margin: 20px auto;
}
Résumé
Dans ce laboratoire, Alex a réussi à utiliser la grille CSS pour redessiner la section d'affichage de "La Maison des Animaux", présentant les services pour animaux de compagnie dans une mise en page en grille structurée et attrayante. Cette approche n'a pas seulement amélioré la présentation visuelle, mais a également démontré la flexibilité et la puissance de la grille CSS dans la conception web.
