Propriété grid

La propriété grid est une forme abrégée pour toutes les propriétés des colonnes et des rangées du conteneur de grille. Toutes les valeurs sont écrites sur une seule ligne, séparées par une barre oblique.

Via grid, on ne peut décrire sur une seule ligne qu'un seul type de propriétés - les propriétés explicites (grid-template-rows, grid-template-columns, grid-template-areas) ou implicites (grid-auto-rows, grid-auto-columns, grid-auto-flow). Les propriétés qui ne sont pas spécifiées prennent leurs valeurs par défaut.

Syntaxe

élément {
	grid: propriétés de grille;
}

Exemple

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

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Maintenant, définissons la même largeur pour les deuxième et troisième rangées, et une largeur différente pour chaque colonne :

<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: 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 avec une largeur de deux fractions, et la première colonne avec 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: 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-template,
qui définit le nombre et la largeur des colonnes et des rangées pour un élément
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
la propriété grid-template-areas,
qui définit le placement des éléments dans la grille
la propriété grid-auto-flow,
qui définit le placement automatique des éléments dans la grille