Tutoriel CSS : La propriété row-gap

La propriété CSS row-gap permet de spécifier l'espace entre les lignes d'une grille (grid) créée avec la propriété display: grid;. Elle est extrêmement utile pour ajuster la distance entre les éléments contenus dans chaque ligne.

Syntaxe générale de la propriété row-gap css

La syntaxe générale pour utiliser la propriété row-gap est la suivante :

    .conteneur {
      row-gap: <valeur>;
    }

Remplacez <valeur> par la valeur souhaitée pour l'espace entre les lignes. La valeur peut être spécifiée en pixels, en pourcentage ou avec d'autres unités CSS.

Valeurs par défaut	normal
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.rowGap="50px"

Valeurs possibles de la propriété row-gap css

Les valeurs possibles pour la propriété row-gap sont les suivantes :

normal: Aucun espace n'est ajouté entre les lignes (valeur par défaut).
<longueur>: Une longueur spécifiée, telle que 10px ou 2em.
<pourcentage>: Une valeur en pourcentage, telle que 5%.

Exemples pratiques d'utilisation de la propriété row-gap css

Voici un exemple concret d'utilisation de la propriété row-gap :

Exemple : Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple de la propriété row-gap css</title> 
<style>
    .conteneur {
      display: grid;
      grid-template-columns: 1fr 1fr;
      row-gap: 20px;
    }

    .box {
      background-color: lightblue;
	  border: solid 1px #000;
      padding: 20px;
      text-align: center;
    }
</style>
</head>
<body>

<h1>La propriété css row-gap</h1>
  <div class="conteneur">
      <div class="box">Élément 1</div>
      <div class="box">Élément 2</div>
      <div class="box">Élément 3</div>
      <div class="box">Élément 4</div>
    </div>
</body>
</html>

Dans cet exemple, la classe .conteneur crée une grille avec deux colonnes et ajoute un espace de 20 pixels entre chaque ligne. Les éléments avec la classe .box seront répartis dans les colonnes, avec l'espace spécifié entre les lignes.

Exemple 2

Exemple avec javascript pour modifier la valeur de row-gap

Exemple : Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété row-gap css</title> 
<style>
 :root {
  --row-gap: 0;
}

body {
  padding: 2rem;
}

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: var(--row-gap);
  row-gap: var(--row-gap);
}

.grid-item {
  background: orange;
  padding: 2rem;
  text-align: center;
}

.controls {
  background-color: #eaeaea;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(2, 1fr);
  justify-content: center;
  padding: 25px 0;
  text-align: center;
  width: 100%;
}

.controls__wrapper {
  margin: 0 auto;
  width: 50%;
}

input {
  margin-right: 15px;
  width: 100%;
}
</style>
</head>
<body>

<h1>La propriété css row-gap</h1>
<div class="controls">
  <p>Glisser pour modifier la valeur de <strong>row-gap</strong> (espacement entre les lignes)</p>
  <div class="controls__wrapper">
    <input id="slider" type="range" min="0" max="100" step="1" oninput="sliderChange(this.value)">
    <output id="output"></output>
  </div>
</div>

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>
<script>
let root = document.documentElement;

const grid = document.getElementsByClassName("grid");
const slider = document.getElementById("slider");
const output = document.getElementById("output");

function sliderChange(val) {
  root.style.setProperty("--row-gap", val + "px");
  output.innerHTML = val + "px";
}

slider.value = 0;
</script>
</body>
</html>

Dans l'ensemble, cet exemple montre comment utiliser la propriété row-gap pour créer une grille CSS avec un espacement entre les lignes ajustable à l'aide d'un curseur de plage. Vous pouvez interagir avec le curseur pour modifier visuellement l'espacement entre les lignes de la grille.

Astuces et conseils d'utilisation de la propriété row-gap css

La propriété row-gap peut également être utilisée avec la propriété grid-gap pour définir à la fois l'espace entre les colonnes et l'espace entre les lignes d'une grille. Par exemple, vous pouvez utiliser la règle suivante pour spécifier à la fois l'espace entre les colonnes et l'espace entre les lignes :
```
.conteneur {
  grid-gap: 10px 20px; /* Espacement des lignes et des colonnes */
}
```
Cela définira un espace de 10 pixels entre les colonnes et un espace de 20 pixels entre les lignes.
- Lorsque vous utilisez la propriété row-gap avec une valeur en pourcentage, gardez à l'esprit que la valeur sera calculée par rapport à la hauteur de la ligne parente. Assurez-vous donc de bien comprendre la structure de votre grille pour obtenir les résultats souhaités.
- Expérimentez avec différentes valeurs pour obtenir l'espacement parfait entre les lignes de votre grille. Vous pouvez ajuster la valeur de row-gap jusqu'à ce que vous obteniez le rendu visuel désiré.
- N'oubliez pas que la propriété row-gap ne s'applique qu'aux éléments disposés en grille. Si vous ne spécifiez pas la propriété display: grid; sur le conteneur parent, la propriété row-gap n'aura aucun effet.

En conclusion, la propriété CSS row-gap est un outil puissant pour contrôler l'espacement entre les lignes d'une grille CSS. En utilisant cette propriété, vous pouvez ajuster facilement l'agencement visuel de vos éléments et créer des mises en page harmonieuses et bien organisées. Expérimentez avec les différentes valeurs et combinaisons pour obtenir le résultat souhaité.