oujood.com

Comment utiliser grid-row-start pour créer des mises en page avancées

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.
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

chercher |

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éfautauto
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é.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57165210 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.




Voir aussi nos tutoriel :

Balise noscript

Définit un autre contenu pour les utilisateurs qui ne supportent pas les scripts côté client

Balise bouton

Définit un bouton cliquable

fonction htmlentities, htmlentities

Convertit tous les caractères éligibles en entités HTML