jQuery fonctions callback
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