dev web
partie 4

grid et position

Positionner en deux dimensions, puis superposer et fixer des éléments.

grid

→ Pour positionner dynamiquement les blocs dans une grille 2D (XY).

CSS Grid pour créer des layouts complexes. Contrairement à Flexbox qui fonctionne sur un axe, Grid vous permet de contrôler les lignes et les colonnes.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

HTML fourni pour l'exercice

Voici une version simplifiée pour comprendre la structure :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="fonts.css">
  <link rel="stylesheet" href="style.css">

  <title>Poster</title>
</head>
<body>
  <div class="header">Titre</div>

  <!-- Ligne 1 -->
  <div class="grid">
    <div class="cell"><div class="box"><h3>DT1</h3></div></div>
    <div class="cell"><div class="box"><h3>DT1</h3></div></div>
    <div class="cell"><div class="box"><h3>DT1</h3></div></div>
    <!-- ... 5 autres cellules -->
	</div>
	<!-- Lignes 2 à 6 : même structure -->
  <!-- Faites 6 lignes de 8 colonnes (48 cellules) -->

  <div class="footer">Footer</div>
</body>
</html>

Définir un conteneur de grille

display: grid

.grid {
  display: grid;
}

Définir des colonnes et des lignes

grid-template-columns, grid-template-rows

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(10, 1fr);
}

L'unité fr (fraction) est une unité spécifique à CSS Grid. Elle représente une fraction de l'espace disponible dans le conteneur de la grille.

Dans l'exemple ci-dessus, on compte un total de 4 fractions ; la première colonne prendra donc 1 quart, la deuxième 2 quarts, et la troisième 1 quart.

Placement des éléments

Placement automatique

Placement manuel

grid-column, grid-row

.item1 {
  grid-column: 1 / 3; /* de la ligne verticale 1 à 3 */
  grid-row: 1 / 2; /* de la ligne horizontale 1 à 2 */
}

Espacement manuel avec span

.item2 {
  grid-column: span 2; /* s'étend sur 2 colonnes */
}

Espacement

grid-gap, column-gap, row-gap

.grid-container {
  grid-gap: 10px; /* espacement entre toutes les cellules */
}

/* Ou séparément */
.grid-container {
  column-gap: 20px;
  row-gap: 10px;
}

Utilisations avancées

Grilles nommées avec grid-template-areas

Permet de créer un layout en définissant la structure avec des noms.

.grid-container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.item1 {
  grid-area: header;
}
.item2 {
  grid-area: main;
}

Fonctions de répétition et autres unités

position

→ Pour donner une position précise au bloc, souvent pour superposer des éléments ou les fixer à l'écran.

Positionnement statique

Positionnement relatif

position: relative; déplace un élément par rapport à sa position initiale dans le flux normal.

Exemple :

.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}

Positionnement absolu

position: absolute; sort un élément du flux normal et le positionne par rapport à son premier parent positionné (c'est-à-dire qui a position: relative, absolute, fixed, ou sticky).

Exemple :

.container {
  position: relative; /* devient le parent de référence */
}

.absolute-box {
  position: absolute;
  top: 0;
  right: 0;
}

Positionnement fixe

position: fixed; positionne un élément par rapport à la fenêtre du navigateur.

Exemple :

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Positionnement sticky

position: sticky; est un hybride entre les positionnements relatif et fixe.

Exemple :

.sticky-box {
  position: sticky;
  top: 0;
}

Propriété z-index

Contrôle la superposition des éléments positionnés. Plus le z-index est élevé, plus l'élément est au-dessus.

Exemple :

.below {
  position: absolute;
  z-index: 1;
}

.above {
  position: absolute;
  z-index: 2;
}

Erreurs courantes

Avec grid

→

Problème : Ma grille ne s'affiche pas.

Solution : Avez-vous bien mis display: grid; sur le conteneur parent ?

→

Problème : Mes colonnes ne sont pas égales.

Solution : Utilisez 1fr pour chaque colonne, pas des valeurs fixes en pixels.

→

Problème : Mon élément ne se place pas où je veux.

Solution : Vérifiez vos valeurs de grid-column et grid-row. Les numéros correspondent aux lignes de la grille, pas aux cellules.

→

Problème : Il y a trop d'espace entre mes cellules.

Solution : Réduisez la valeur de grid-gap ou utilisez gap: 0;.

Avec position

→

Problème : Mon élément absolute ne se positionne pas par rapport à son parent.

Solution : Le parent doit avoir position: relative; (ou absolute, fixed, sticky). Par défaut, les éléments ont position: static; et ne servent pas de référence.

→

Problème : Mon élément fixed défile avec la page.

Solution : Vérifiez qu'aucun parent n'a de propriété transform, filter, ou perspective qui peut casser le fixed.

→

Problème : Mon élément sticky ne se fixe pas.

Solution : Vérifiez que vous avez défini au moins une valeur (top, bottom, left, ou right) ; le parent doit avoir assez de hauteur pour permettre le scroll ; pas de overflow: hidden; sur les parents

→

Problème : Mon z-index ne fonctionne pas.

Solution : z-index ne fonctionne que sur les éléments positionnés (relative, absolute, fixed, ou sticky).

Pour aller plus loin :

← HTML sémantique & flex