Nombre et largeur des colonnes dans les grilles CSS

Nous commencerons notre familiarisation avec le fonctionnement des grilles en définissant le nombre et la largeur des colonnes selon lesquelles les éléments enfants seront placés. Pour cela, nous utiliserons la propriété grid-template-columns, qui est spécifiée dans l'élément parent et définit le nombre et la largeur des colonnes que les éléments enfants occuperont dans la grille. Dans la valeur de la propriété, nous indiquons la largeur des colonnes en pixels.

Exemple

Commençons par créer un élément parent et rendons-le un conteneur de grille. Supposons que nous ayons un div contenant quatre éléments enfants. Définissons pour lui dans la propriété display la valeur grid, et dans la propriété grid-template-columns spécifions la largeur pour deux colonnes :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Maintenant, créons une grille avec quatre colonnes de tailles différentes :

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

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Tâches pratiques

Supposons que vous ayez une div avec neuf éléments enfants. Transformez l'élément parent en un conteneur de grille.

Placez les éléments enfants en deux colonnes d'une largeur de 200px.

Placez les éléments enfants en trois colonnes d'une largeur de 150px.

Placez les éléments enfants en trois colonnes : la première d'une largeur de 100px, la seconde de 150px, et la troisième de 200px.