Propriété CSS grid-column-end
Utilisez la propriété CSS grid-column-end pour définir où un élément de grille se termine dans les colonnes, par numéro de ligne ou par étendue.
La propriété CSS grid-column-end définit l'endroit où un élément de grille se termine le long de l'axe inline (colonnes). Vous lui donnez soit un numéro de ligne de colonne où s'arrêter, soit une valeur span indiquant le nombre de colonnes que l'élément doit couvrir. Associée à grid-column-start, elle définit les bords inline-start et inline-end de la zone de grille de l'élément.
Numérotation des lignes de grille
Une grille est délimitée par des lignes numérotées, et non par les pistes (colonnes) elles-mêmes. Une grille à trois colonnes possède quatre lignes verticales : la ligne 1 longe le bord gauche, la ligne 4 le bord droit.
line: 1 2 3 4
| col | col | col |grid-column-end fait référence à l'une de ces lignes :
grid-column-end: 3fait terminer l'élément à la ligne 3 — il s'arrête avant la troisième colonne.grid-column-end: span 2fait terminer l'élément 2 colonnes après son point de départ, quel que soit le numéro de ligne absolu.
Vous pouvez également compter depuis la fin avec des nombres négatifs : -1 désigne la dernière ligne, -2 celle qui la précède. Ainsi, grid-column-end: -1 atteint toujours le bord droit de la grille, quel que soit le nombre de colonnes — pratique pour les éléments « pleine largeur ».
Conseil : la valeur décrit uniquement l'endroit où l'élément s'arrête. Son point de départ provient de
grid-column-start(ou est placé automatiquement). La propriété raccourciegrid-columndéfinit les deux à la fois, par exemplegrid-column: 1 / 3.
| Valeur initiale | auto |
|---|---|
| S'applique à | Les éléments de grille. |
| Héritée | Non. |
| Animable | Oui. Le nombre de colonnes est animable. |
| Version | CSS Grid Layout Module Level 1 |
| Syntaxe DOM | object.style.gridColumnEnd = "3"; |
Syntaxe
Syntaxe de la propriété CSS grid-column-end
grid-column-end: auto | span n | column-line | initial | inherit;Exemple de la propriété grid-column-end :
Exemple de la propriété CSS grid-column-end avec la valeur auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
background-color: #8ebf42;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box1 {
grid-column-end: auto;
}
</style>
</head>
<body>
<h2>Grid-column-end property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>Résultat
Exemple de la propriété grid-column-end avec des numéros de ligne et des valeurs span :
Exemple de la propriété CSS grid-column-end avec la valeur span n
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #888;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box1 {
grid-column-end: 3;
}
.span-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #888;
padding: 10px;
margin-top: 20px;
}
.span-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.span-box1 {
grid-column-end: span 3;
}
</style>
</head>
<body>
<h2>Grid-column-end property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="span-container">
<div class="span-box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>La grille du dessus utilise grid-column-end: 3 (un numéro de ligne), de sorte que le premier élément se termine à la ligne 3 et couvre deux colonnes. La grille du dessous utilise grid-column-end: span 3, ce qui fait que l'élément s'étend sur trois colonnes à partir de sa propre position.
Dans l'exemple suivant, nous utilisons à nouveau span pour contrôler le nombre de colonnes couvertes par l'élément.
Exemple de la propriété grid-column-end avec la valeur « span n » :
Exemple de la propriété CSS grid-column-end avec la valeur 'span n'
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 25px;
padding: 20px;
background-color: #7cbf7c;
}
article div {
text-align: center;
font-size: 35px;
background-color: #ffffff;
padding: 30px 0;
}
article div:first-child {
grid-column-end: span 3;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</article>
</body>
</html>Dans l'exemple suivant, la valeur appliquée spécifie à quelle colonne l'affichage de l'élément doit se terminer.
Exemple de la propriété grid-column-end avec une valeur de numéro de ligne :
Exemple de la propriété CSS grid-column-end avec la valeur 'column-line' :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-gap: 5px;
background-color: #8ebf42;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
}
.grid-container > div {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
.box1 {
grid-column-end: 3;
}
</style>
</head>
<body>
<h2>Grid-column-end property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>Exemple de la propriété grid-column-end avec la valeur « auto » :
Exemple d'utilisation de la propriété CSS grid-column-end avec la valeur auto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
background-color: #8ebf42;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box1 {
grid-column-end: auto;
}
</style>
</head>
<body>
<h2>Grid-column-end property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
</div>
</body>
</html>Valeurs
| Valeur | Description | Essayez |
|---|---|---|
| auto | Place l'élément automatiquement ; il s'étend par défaut sur une seule colonne. C'est la valeur initiale. | Essayez » |
| span n | L'élément se termine n colonnes après sa ligne de départ. | Essayez » |
| column-line | Un numéro de ligne (positif ou négatif) ou une ligne nommée où l'élément doit se terminer. | Essayez » |
| initial | Définit la propriété à sa valeur par défaut (auto). | |
| inherit | Hérite la valeur de l'élément parent. |
Erreurs courantes
spanest relatif, les lignes sont absolues.grid-column-end: 3s'arrête toujours à la ligne 3 ;grid-column-end: span 3s'arrête trois colonnes après la ligne de départ. Les confondre est le bug de grille le plus fréquent.- Terminer avant de commencer est valide — le navigateur les échange. Si
grid-column-endpointe vers une ligne antérieure àgrid-column-start, les deux valeurs sont échangées afin que la zone reste valide. grid-column-endseul ne déplace pas le point de départ. Définir uniquement la fin laisse le début placé automatiquement. Pour fixer les deux, utilisez la propriété raccourciegrid-column.
Propriétés associées
grid-column-start— le bord inline-start de l'élément.grid-column— propriété raccourcie pour le début et la fin ensemble.grid-row-end— le même principe appliqué à l'axe de bloc (ligne).grid-template-columns— définit les colonnes entre lesquelles ces lignes s'étendent.