La propriété grid-auto-rows

Améliorez votre mise en page avec la propriété grid-auto-rows

La propriété CSS grid-auto-rows permet de définir la hauteur des lignes d'un grille automatique. La grille automatique est une grille qui est créée automatiquement par le navigateur lorsque vous ajoutez des éléments à la grille, mais n'avez pas explicitement défini de lignes ou de colonnes.

Voici la syntaxe de la propriété grid-auto-rows :
La Syntaxe CSS

grid-auto-rows: <length> | <percentage> | min-content | max-content | auto;

La valeur <length> peut être une longueur absolue (en pixels, par exemple), un pourcentage de la taille de la grille, ou une des valeurs spéciales min-content, max-content, ou auto.

La valeur min-content signifie que la hauteur de la ligne sera aussi petite que possible tout en étant suffisante pour contenir tout son contenu. La valeur max-content signifie que la hauteur de la ligne sera aussi grande que possible tout en étant limitée par le contenu de la ligne. La valeur auto signifie que la hauteur de la ligne sera déterminée par le navigateur.

La propriété grid-auto-rows est prise en charge par la plupart des navigateurs modernes, y compris Internet Explorer 11 et les versions ultérieures.

Voici un exemple d'utilisation de la propriété grid-auto-rows :

Exemple Copier le code

.grid {
  display: grid;
  grid-auto-rows: 50px;
}

Dans cet exemple, nous avons défini la hauteur de toutes les lignes de la grille automatique à 50 pixels.

Voici un autre exemple qui utilise la valeur min-content :

Exemple Copier le code

.grid {
  display: grid;
  grid-auto-rows: min-content;
}

Dans cet exemple, la hauteur de chaque ligne sera aussi petite que possible tout en étant suffisante pour contenir tout son contenu.

Il est également possible de définir des valeurs différentes pour chaque ligne en utilisant la propriété grid-template-rows. Par exemple :

Exemple Copier le code

.grid {
  display: grid;
  grid-template-rows: 50px 100px 150px;
}

Dans cet exemple, nous avons défini la hauteur de chaque ligne de la grille à 50 pixels, 100 pixels et 150 pixels respectivement.

Valeurs par défaut	row
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS1
Syntaxe JavaScript:	object.style.gridAutoFlow="row dense"

Prise en charge de la propriété grid-template-rows dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.

Explorateur
Verssion	57	16	52	10	44

En résumé, la propriété grid-auto-rows permet de définir la hauteur des lignes d'une grille automatique.

Valeurs de la propriété css grid-template-rows

La propriété CSS grid-auto-rows accepte les valeurs suivantes :
<length> : une longueur absolue, telle qu'un nombre suivi d'une unité de mesure (par exemple, "50px", "10em", etc.) <percentage> : un pourcentage de la taille de la grille
min-content : la hauteur de la ligne sera aussi petite que possible tout en étant suffisante pour contenir tout son contenu.
max-content : la hauteur de la ligne sera aussi grande que possible tout en étant limitée par le contenu de la ligne.
auto : la hauteur de la ligne sera déterminée par le navigateur.
Voici un exemple qui montre comment on utilise chaqu'une de ces valeurs :

Exemple Copier le code

.grid {
  display: grid;
  grid-auto-rows: 50px; /* longueur absolue */
  grid-auto-rows: 10%; /* pourcentage */
  grid-auto-rows: min-content; /* hauteur minimale nécessaire pour contenir le contenu */
  grid-auto-rows: max-content; /* hauteur maximale limitée par le contenu */
  grid-auto-rows: auto; /* hauteur déterminée par le navigateur */
}

Il est important de noter que si vous utilisez la propriété grid-template-rows pour définir la hauteur de chaque ligne de manière explicite, la propriété grid-auto-rows n'aura aucun effet.
Voici un exemple HTML et CSS qui utilise la propriété grid-auto-rows :

Exemple Copier le code

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
  display: grid;
  grid-auto-rows: 50px; /* définir la hauteur de chaque ligne à 50 pixels */
  grid-gap: 20px; /* ajouter un espacement entre les éléments de la grille */
}

.item {
  /* styles pour les éléments de la grille */
  background-color: lightblue;
  border: 1px solid black;
  text-align: center;
}
</style>
</head>
<body>

<h1>La propriété css grid-auto-rows</h1>
<div class="grid">
  <div class="item">Élément 1</div>
  <div class="item">Élément 2</div>
  <div class="item">Élément 3</div>
  <div class="item">Élément 4</div>
</div>
</body>
</html>

Le résultat sera une grille avec quatre éléments, chacun ayant une hauteur de 50 pixels et un espacement de 20 pixels entre eux.

Il est important de noter que si vous ajoutez des éléments à la grille qui dépassent de sa hauteur définie, la grille s'agrandira automatiquement pour les contenir. Par exemple, si vous ajoutez un élément qui a une hauteur de 100 pixels, la grille s'agrandira pour inclure cet élément.

Astuces et conseils pour la propriété css grid-auto-rows

Voici quelques astuces et conseils pour utiliser efficacement la propriété CSS grid-auto-rows :

1- Utilisez la valeur min-content si vous voulez que la hauteur de chaque ligne soit aussi petite que possible tout en étant suffisante pour contenir tout son contenu. Cela peut être utile si vous voulez éviter de gaspiller de l'espace inutilement.
2- Utilisez la valeur max-content si vous voulez que la hauteur de chaque ligne soit aussi grande que possible tout en étant limitée par le contenu de la ligne. Cela peut être utile si vous voulez que chaque ligne ait la même hauteur, mais que cette hauteur soit adaptée au contenu de chaque ligne.
3- Utilisez la valeur auto si vous voulez que le navigateur détermine la hauteur de chaque ligne. Cela peut être utile si vous n'avez pas besoin de contrôler précisément la hauteur de chaque ligne.
4- Utilisez la propriété grid-template-rows si vous voulez définir la hauteur de chaque ligne de manière explicite. Cela peut être utile si vous avez besoin de contrôler précisément la hauteur de chaque ligne.
5- N'oubliez pas que la propriété grid-auto-rows n'a aucun effet si vous utilisez la propriété grid-template-rows pour définir la hauteur de chaque ligne de manière explicite.
6- Si vous avez besoin de définir la hauteur de chaque ligne de manière différente, vous pouvez utiliser la propriété grid-template-rows avec des valeurs différentes pour chaque ligne. Par exemple :

Exemple Copier le code

.grid {
  display: grid;
  grid-template-rows: 50px 100px 150px; /* définir la hauteur de chaque ligne à 50 pixels, 100 pixels et 150 pixels respectivement */
}

7- N'oubliez pas de spécifier une valeur pour la propriété display afin que la grille soit correctement affichée. La valeur la plus couramment utilisée est grid.
8- N'oubliez pas que la propriété grid-auto-rows n'est utilisable que sur des éléments en grille. Si vous l'utilisez sur un autre type d'élément, elle n'aura aucun effet.

Pour plus de détails voir aussi notre tutoriel sur CSS grid : vue en grille

Liste des propriétés css

Découvrez ce que vous pouvez faire avec la propriété grid-auto-rows

Les propriétés CSS par ordre alphabétique

Améliorez votre mise en page avec la propriété grid-auto-rows

Prise en charge de la propriété grid-template-rows dans les navigateurs

Valeurs de la propriété css grid-template-rows

Astuces et conseils pour la propriété css grid-auto-rows

La méthode secrète likes sans fin sur Facebook