Convertit les caractères spéciaux en entités HTML
Définition et utilisation da la propriété css grid-row-start
La propriété CSS grid-row-start permet de définir à quelle ligne de la grille un élément doit être placé. Cette propriété fonctionne en conjonction avec grid-row-end et grid-column-start pour déterminer l'emplacement d'un élément dans une grille à plusieurs dimensions.La Syntaxe CSS
Voici la syntaxe de la propriété CSS grid-row-start :
grid-row-start: <ligne> | <taille> | <nom> | auto;
<ligne> : un entier qui indique la ligne de départ de l'élément. La première ligne a pour numéro 1.
<taille> : une valeur en unités de mesure (par exemple, px, em, etc.) qui indique la taille de la ligne. Cette valeur est utilisée lorsque vous définissez les lignes de la grille en utilisant grid-template-rows.
<nom> : un nom de ligne que vous avez défini en utilisant grid-template-rows.
auto : laisse au navigateur le soin de déterminer la ligne de départ de l'élément.
Voici quelques exemples d'utilisation de la propriété grid-row-start :
Exemple Copier le code
.element {
grid-row-start: 2; /* commence à la deuxième ligne de la grille */
}
.element {
grid-row-start: 50px; /* commence à une ligne de 50 pixels de hauteur */
}
.element {
grid-row-start: row1-start; /* commence à la ligne nommée "row1-start" */
}
.element {
grid-row-start: auto; /* laisse au navigateur le soin de déterminer la ligne de départ */
}
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.gridRowStart="3" |
Prise en charge de la propriété 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é.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 16 | 52 | 10 | 44 |
Voici un exemple de code qui utilise grid-row-start pour placer un élément dans la première ligne de la grille :
Exemple Copier le code
.element {
grid-row-start: 1;
}
Vous pouvez également utiliser des valeurs numériques pour définir la ligne de départ de l'élément. Par exemple, si vous voulez que l'élément commence à la troisième ligne de la grille, vous pouvez utiliser la valeur 3 :
Copy code
.element {
grid-row-start: 3;
}
Il est également possible d'utiliser des noms de lignes pour définir la ligne de départ de l'élément. Pour ce faire, vous devez d'abord définir les noms de lignes en utilisant la propriété grid-template-rows, comme ceci :
Exemple Copier le code
.grid {
grid-template-rows: [row1-start] 50px [row1-end row2-start] 50px [row2-end];
}
Vous pouvez alors utiliser ces noms de lignes pour définir la ligne de départ de l'élément :
Exemple Copier le code
.element {
grid-row-start: row1-start;
}
Il est également possible d'utiliser la valeur auto pour laisser au navigateur le soin de déterminer la ligne de départ de l'élément. Dans ce cas, le navigateur placera l'élément dans la première ligne disponible de la grille.
Exemple Copier le code
.element {
grid-row-start: auto;
}
Enfin, vous pouvez utiliser la propriété grid-row pour définir à la fois la ligne de départ et la ligne de fin de l'élément en une seule instruction.
Exemple Copier le code
.element {
grid-row: 1 / 3;
}
Ceci placera l'élément dans les lignes 1 à 3 de la grille.
La propriété grid-row-start est une propriété très puissante qui vous permet de contrôler de manière précise l'emplacement de vos éléments dans une grille à plusieurs dimensions. Elle est particulièrement utile lorsque vous travaillez sur des mises en page complexes et que vous voulez un contrôle précis sur l'emplacement de chaque élément
Voici un exemple de code HTML qui utilise la propriété CSS grid-row-start pour placer des éléments dans une grille à plusieurs dimensions :
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>grid-row-start </title>
<style>.grid div {border:solid 1px;}
.grid {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
}
.element1 {
grid-row-start: 1;
grid-column-start: 1;
}
.element2 {
grid-row-start: 1;
grid-column-start: 2;
}
.element3 {
grid-row-start: 2;
grid-column-start: 1;
}
.element4 {
grid-row-start: 2;
grid-column-start: 2;
}
</style>
</head>
<body>
<h1>La propriété css grid-row-start</h1>
<div class="grid">
<div class="element1">Element 1</div>
<div class="element2">Element 2</div>
<div class="element3">Element 3</div>
<div class="element4">Element 4</div>
</div>
</body>
</html>
Dans cet exemple, nous avons défini une grille à deux colonnes et deux lignes. Nous avons ensuite utilisé la propriété grid-row-start pour placer chaque élément dans la ligne appropriée de la grille. L'élément 1 est placé dans la première ligne et la première colonne, l'élément 2 est placé dans la première ligne et la deuxième colonne, etc.
Le résultat final est une grille à deux colonnes et deux lignes, avec chaque élément placé dans la bonne ligne et la bonne colonne.