Propriété grid-template

La propriété grid-template définit le nombre et la largeur des rangées et colonnes que l'élément occupera dans la grille et est une forme raccourcie des propriétés grid-template-rows et grid-template-columns. Les rangées et colonnes sur lesquelles l'élément sera placé sont indiquées par une barre oblique. La propriété grid-template est définie dans l'élément parent et détermine la disposition des éléments enfants. Dans la valeur de la propriété, nous indiquons la largeur des rangées ou colonnes dans toutes les unités de taille.

Lorsque des valeurs en pixels sont spécifiées dans les propriétés, les tailles des éléments leur correspondront exactement. Si nous utilisons le mot-clé auto, les colonnes et les rangées rempliront tout l'espace disponible. L'utilisation de l'unité fr (fraction) signifie que tout l'espace sera divisé en parts égales. L'avantage de fr est son adaptabilité à différents conteneurs ou résolutions d'écran, car fr divise simplement l'espace en le nombre de fractions spécifié sans lien avec une taille exacte en pixels.

Syntaxe

sélecteur {
	grid-template: largeur et nombre de rangées / largeur et nombre de colonnes;
}

Exemple

Créons un tableau à l'aide de la propriété grid-template :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Maintenant, donnons aux deuxième et troisième rangées la même largeur, et à chaque colonne une largeur différente :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Maintenant, dans le tableau de l'exemple précédent, faisons la rangée du haut d'une largeur de deux fractions, et la première colonne d'une demi-fraction :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voir aussi

la propriété grid,
qui définit la notation abrégée des propriétés des colonnes et des rangées
la propriété grid-template-rows,
qui définit le nombre et la largeur des rangées dans la grille
la propriété grid-template-columns,
qui définit le nombre et la largeur des colonnes dans la grille