Propriété CSS grid-row-start
La propriété CSS grid-row-start définit le début de l’élément à l’intérieur de la ligne de grille, en ajoutant une étendue, une ligne ou rien à son emplacement dans la grille, et spécifie la ligne de début du bloc de la zone de grille de l’élément. Cette propriété fait partie de la propriété raccourcie grid-row.
| Initial Value | auto |
|---|---|
| Applies to | Grid items. |
| Inherited | No. |
| Animatable | Yes. The placement of items is animatable. |
| Version | CSS Grid Layout Module Level 1 |
| DOM Syntax | object.style.gridRowStart = "5"; |
Syntaxe
Syntaxe de CSS grid-row-start
grid-row-start: auto | <line> | span <number> | initial | inherit;Note : <line> est un espace réservé pour un numéro de ligne ou un nom de ligne personnalisé.
Exemple de la propriété grid-row-start :
Exemple de code CSS grid-row-start
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 20px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box {
grid-row-start: auto;
}
</style>
</head>
<body>
<h2>Grid-row-start property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div class="box">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Résultat
Exemple de la propriété grid-row-start, où la troisième boîte commence à partir de la première ligne :
Exemple CSS grid-row-start première ligne
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 20px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box {
grid-row-start: 1;
}
</style>
</head>
<body>
<h2>Grid-row-start property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div class="box">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Exemple de la propriété grid-row-start, où la quatrième boîte commence à partir de la deuxième ligne :
Exemple CSS grid-row-start deuxième ligne
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 20px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box {
grid-row-start: 2;
}
</style>
</head>
<body>
<h2>Grid-row-start property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="box">4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Exemple de la propriété grid-row-start avec le mot-clé span :
Exemple CSS grid-row-start span
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 20px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box {
grid-row-start: span 2;
}
</style>
</head>
<body>
<h2>Grid-row-start property example with span</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div class="box">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Résultat
Exemple des valeurs initial et inherit :
Exemple CSS grid-row-start initial/inherit
.box-initial {
grid-row-start: initial; /* Resets to the default 'auto' behavior */
}
.box-inherit {
grid-row-start: inherit; /* Inherits the value from the parent grid item */
}Note :
initialest généralement utilisé pour réinitialiser la propriété à son comportement par défaut, tandis queinheritest utile lorsqu’un élément de grille enfant doit correspondre au comportement de placement de son parent.
Valeurs
| Value | Description | Play it |
|---|---|---|
| auto | S’étend sur une ligne. Le placement exact dépend des règles de placement automatique de la grille. C’est la valeur par défaut de cette propriété. | Play it » |
<line> | Spécifie un numéro ou un nom de ligne où l’élément doit commencer. | Play it » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | |
| inherit | Hérite de la propriété de son élément parent. |
Note : Lorsqu’elle est combinée avec
grid-row-end, assurez-vous que la ligne de début se trouve avant la ligne de fin afin d’éviter le chevauchement ou l’écrasement des éléments de grille.
Practice
Que spécifie la propriété grid-row-start en CSS ?